Hover Image Circle Background

When I select an image style of “circle” I seem to get odd effects with the background content colour. Sometime the content background is circular and sometimes square. A solid colour will always show a square background. When I choose some opacity, then I start getting inconsistent results, sometimes a circular background (which is what I expect and want) and sometime a square background and sometimes if flashes between the two, that is starts of square and ends up showing just the circles. And once black ??? Eg.

The top picture is what I want. I often get this happening when I preview “Full Width”, but when I preview in iPad or iPhone, it always shows the solid background.

The way that Bootstrap handles its circular images seems to be a problem for things like this sometimes. When the stack was released the circular style for the images worked well. I suspect somewhere over time, probably in browser or OS updates, webkit changed the way it handles this.

I’ll have a look at it, and see if I can’t work around whatever might be the problem. If you’re experiencing a problem with the circular style then the Rounded corners style is probably suffering as well, as it works similarly.

Addendum: Just as a note – I am not confident there is a solution to this one. It may be that the image style setting may have to be removed in the end. I say this because the hover captions are not limited to the circular shape unfortunately. We’ll see though.

1 Like

Might have a solution to this for you @bdekok. I’ll do some tweaking and get these changes tested and then get back to you.


That would be awesome. Thanks heaps.

Was there ever a solution for this situation? I would love to know what it is if available!

1 Like