The Lodge is members-only design/dev videos and Office Hours.

Next Office Hours Session: "Implementing an SVG Icon System" Nov 30 - 6:00 PM Eastern

Need to create circle overlay for Chrome and Safari

  • # January 9, 2013 at 1:51 pm

    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:

    .overlayer .overlay {
    background-color: #333;
    background: none rgba(0,0,0,0.75);
    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

Viewing 1 post (of 1 total)

You must be logged in to reply to this topic.

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed