Need to create circle overlay for Chrome and Safari

[DesignLady94]

I am using the ThumbFX plugin to create thumbnail overlays. My thumbnails are circles…their code works fine in Firefox, but doesn’t created the circle in Chrome and Safari.

I have tried adding border-radius settings to .overlayer .overlay but it’s just not working. Could some one suggest how to set up the code so that the other two browsers work like Firefox? Here’s the site link:

debbierking.com/bootstrap

.overlayer .overlay {
background-color: #333;
background: none rgba(0,0,0,0.75);
z-index:99;
padding-right: 20px;
}

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

.overlayer .overlay > div {
padding: 5px 0 15px 10px;
}

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

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

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

And the HTML

• 
  

  Karen’s Salon

  Web Design

[Author]

Posts