Cricular Overlay on Homepage

After viewing your website, I guess the issue is resolved.But, how did you do it?

To make the post thumbnails circular add this to your CSS using a CSS plugin (I know you’ve already done this part, but in case others want to know how to do it):

.post {
    border-radius: 50%;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    -o-border-radius: 50%;
}

For the part you’re looking to do as far as the hover overlay part, add this to your CSS using a CSS plugin:

.post:hover .post-overlay {
    border-radius: 50%;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    -o-border-radius: 50%;
}

[Moderator note: code fixed. Please wrap code in the backtick character or use the code button.]

You can also mess with the percentages for a different look. I used 15% for all of them for nice rounded-corner squares.

• This reply was modified 7 years, 7 months ago by bdbrown.