Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Trouble Rendering Circle Overlays in Chrome and Safari Re: Trouble Rendering Circle Overlays in Chrome and Safari

#120595
Atelierbram
Participant

That’s too bad, if you ever have a change of heart you could always try this:

.thumbnail * {
/* outline: 1px dotted red */
}
.overlayer[style] {
position: absolute !important;
width: 290px !important;
height: 290px !important;
z-index: 2 !important;
border-radius: 50%;
overflow: hidden;
}
.thumbnail {
position: relative;
width: 290px;
height: 290px;
border-radius: 50%;
z-index: 99999;
overflow: hidden;
}
.thumbnail .size-auto {
width: 290px;
height: 290px;
position: absolute;
top: 0;
left: 0;
z-index: 1;
border-radius: 50%;
}
.thumbnail .overlayer .overlay[style] {
z-index: 2;
border-radius: 50%;
width: 290px !important;
height: 290px !important;
clip: rect(133px, 290px, 290px, 0); /* you will have to edit these values */
}
.thumbnail .overlayer .overlay > div {
margin-top: 67%; /* you will have to edit this value */
}

So I changed the position values around, z-indexes, with some clipping. Note that only the combination of `[style]` with `!important` is able to override ( in the stylesheet ) the injected inline css styling in the `DOM` by javascript. I would recommend considering to drop the javascript for the hover effect all together, and instead try CSS3 (; the thing you might lose though is the ‘easing effect’, but that is in a way also gone now …). Good luck, keep it up and persevere: these are interesting problems.