Make white background of front page "circles" transparent.

If he removes that line, than he’ll have circles inside squares. And from what I’ve tested, If border clipping gets applied to the parent (.thumb-wrapper) it only works when .round-div is not in transition. Practically it looks good when static but corners show up when circles shrink/enlarge.

I haven’t found a solution for it yet.

Actually, it can be done (forget the code above):

.round-div {border-color: rgba(255, 255, 255, .5);}
.thumb-wrapper { height: 270px; border-radius: 300px;}

It was much easier than I expected. Don’t forget to upload 270 x 270px images for all the three featured pages or you’ll see the circles cut at the lower end.

Hmm… Nope. The border-radius doesn’t work consistently during different transitions of the page (including the slider) and the corners show up during those effects. Sorry for not properly testing beforehand.

But the

.thumb-wrapper {height: 270px;}

and upload of 270px x 270px images to featured pages is a good idea for anyone wanting their icons 1:1.

I revert to my previous status: “I haven’t found a solution yet.”

If I could, I would have just deleted my previous post. ??

I know this discussion is old but I came across it and thought I’d share my findings for anyone else who is having this problem.

I was experiencing the same problem with the circles and hover effect being clobbered when I tried to change the border to transparent to allow my gradient background to come through. While searching the forum I came across this discussion and am so thankful. I LOVE the effect of acub’s solution. My pictures are now rectangular instead of circles but they look fabulous with the semi-transparent border over the image that clears on hover. I tried various image sizes (250×250, 270×250, 270×270) and found that 270×250 works best especially on tablets/mobile. The only problem that I am still having is that the hover effect works on small devices but the semi-transparent border does not (instead I have the parent white border) but at the small sizes the white border looks fine anyway.

Take a look here. You will probably have entered the CSS that makes the change at normal/desktop size, but you also have to enter the change at other media sizes too. The link explains more.