Make white background of front page "circles" transparent.

Can we see a link please? I know what you mean, but better to see it in situ…

The squares that you see are actually the icon’s borders. If you make them transparent, the zoom-in/out effect disappears. Instead, you have to make the border the exact color of your page background.

You need to add this code in the Custom CSS panel:

.round-div {border-color: white;}

but replace “white” with whatever color code your page has as background.
If you don’t care about the circles effect replace “white” with “transparent”.

Try changing the word white to #f9f9f9

.round-div {border-color: #f9f9f9;}

Hope this helps, i’m a newb here so go easy on me.

Doh! I need to read complete posts, before I post an answer..sorry

Thanks for your suggestions everyone. It seems like acub’s knowledge about the theme is very valuable here. I want to keep the zoom effect.

Really appreciate everyone’s help.

.

Hi beyedmonk, this item is working as you say… thank you!
Please, take a look at this screenshots,

https://imageshack.us/photo/my-images/547/5et5.jpg
https://imageshack.us/photo/my-images/33/zjev.jpg

Which background do you recommend me?
I’d wish a “transparent” background but maintaining the circles zoom, is that definitely impossible?

Best regards,

Richy

I’d wish a “transparent” background but maintaining the circles zoom, is that definitely impossible?

No. The circle zoom function is only possible because of a solid border.

Hi, I have an image as my background on my site. Is it possible to make the background of the circles the same and to keep their zoom feature?

Thanks

The same as your image, no.

Ok thanks!

There is a solution that (i think) would look decent on pages with background image.

1. Change icon clipping from circle to square with

.round-div {
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
}

2. Set the .round-div border-color to something semi-transparent using rgba(). Example (white 50%):

.round-div {border-color: rgba(255, 255, 255, .5);}

3. Change the proportions of featured pages icons to squares (you don’t really have to do this, but I think this solution would look better with square images): 250×250 or 270×270. You might find in theme FAQ a topic on changing icon’s sizes and you will also have to tweak a bit with .thumb-wrapper dimensions on different widths to make it look right.

Alternatively, if you don’t feel like doing that, you could hide the non-square icons imperfections (visible on hover) by altering the scale factor of .round-div on hover:

.widget-front.hover .round-div, article.hover .round-div {
-webkit-transform: scale(1.65);
-moz-transform: scale(1.65);
-ms-transform: scale(1.65);
-o-transform: scale(1.65);
transform: scale(1.65);
}

Great effect, acub!!
And could you achieve the same… but “circular”?

@acub Nice!

@superichy Just omit step 1.