Re: Trouble Rendering Circle Overlays in Chrome and Safari

[DesignLady94]

Thank you…this totally works in terms of rendering the half circles in all three browsers! Was not familiar with the clipping property…will definitely have to remember that!

Btw, what exactly does .thumbnail .overlayer .overlay > div { do?

Just two things left to work out…for some reason, the text is not displaying, and I needed to resize for responsive…is there a way for the half-circles to automatically r esize? Or do I just need to make the changes for each media query? I tried setting the widths to max-width, but when I did that the overlay half-circle disappeared.

Here’s what I have:

.thumbnails {
margin: 0;
padding: 0;
}

.thumbnails > li {
margin-left: 10px;
}

.thumbnail {
border: none;
box-shadow: none;
position: relative;
z-index: 100;
}

.thumbnail a {
border: 1px solid #c5c5c5;
background: #d5d5d5;
display: block;
padding: 6px;
text-decoration: none;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
border-radius: 50%;
}

.thumbnail img {
-moz-box-sizing: border-box;
height: auto;
position: relative;
width: 100%;
vertical-align: middle;

-moz-border-radius: 50%;
-webkit-border-radius: 50%;
border-radius: 50%;
}

.thumbnail a:hover {
border: 1px solid #0f7a7d;
background: #118f92;
}

.thumbnail .overlayer .overlay {
background-color: rgba(0,0,0,0.7);
z-index: 99;
border-radius: 50%;
width: 290px !important;
height: 290px !important;
clip: rect(194px, 290px, 290px, 0);
}

.thumbnail .overlayer .overlay > div {
padding: 5px 0 15px 10px;
z-index: 20px;
}

.thumbnail .overlayer .overlay h3, .overlayer .overlay p {
color: #fff;
display: block;
text-align: center;
text-shadow: 0 -1px rgba(0,0,0,.7);
}

.thumbnail .overlayer .overlay.remove-padding > div {
padding: 0;
}

.thumbnail .overlayer .overlay h3 {
font: normal 24px ‘Museo300Regular’, Arial, sans-serif;
margin-bottom: 0;
}

.thumbnail .overlayer .overlay p {
font-size: 14px;
}