Grow your CSS skills. Land your dream job.

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:

    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

Viewing 1 post (of 1 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".