Re: Trouble Rendering Circle Overlays in Chrome and Safari

[Atelierbram]

@DesignLady94 , one of these days, when I find some extra time, I will make a codepen to see this thing work. Here are my thoughts however: you’re `.overlayer .overlay > div` doesn’t need to have `50% border-radius` for all corners, but what’s essential here is that it has to sit *behind* you’re `.overlayer .overlay` which surely *does* have to be a ‘perfect circle’, and therefore will need to have full height and width ( here 290px), but then be clipped from the top in order to have the look that you’re after. But then also make sure to override or change the javascript to give the .thumbnail a.overlayer[style] ( which is given the `overflow:hidden` by means of injected inline css by javascript ) the position absolute instead of relative , also make sure of full widht and height (use `!important` in stylesheet after the value, and have the extra [style] attribute with the property: you’re overriding inline css here! ). Then give you’re `.thumbnail` wrapper a `position` of `relative`, and `z-index:` , we’re almost there. A last tip is to disable the history in your’re browser, flush the cache, and in Chrome webdeveloper-tools to disable the cache, if you want to stay sane as a web-designer/developer.

.thumbnail .overlayer .overlay[style] {
z-index: 99;
border-radius: 50%;
width: 290px !important;
height: 290px !important;
clip: rect(194px, 290px, 290px, 0);
/* you probably will have to edit the first value ( 194px = 2/3 from top of image which is 290px height */
}

Oh, and yes, I can work with jQuery, but am not familiar with Bootstrap js, and generally more of a frontend tweaker; just know some basic javascript, but am trying to learn more.