That s/b debbierking.com/bootstrap.

Thanks Atelierbram...It's getting there...I need the height to be only only about 33%, but when I use that height instead, the circle flattens out in Chrome and Safari, rather than looking the way it does in Firefox (which is the way I want it to look.)

Chrome and Safari don't render circles properly...Firefox does. Do you have any ideas? Right now I've lost my styling for the site so am trying to restore that....not sure why.

Atelierbram...I appreciate all your efforts with this! In the end, I broke down and made a .png of the overlay image...I hated to do it...but oh well....I do hope Chrome and Safari get their act together soon to render circles properly ;o

Thank you! Hate to let go of the Hover plugin since I paid $$$ for it. Will try this though. The image thing isn't working out at all cause I can't get it to resize on hover...will definitely try your code!

Do you know jquery? Am trying to get several bootstrap js functions to work. Are you familiar with Bootstrap?

I've gone back to my previous code and surprisingly, it is rendering properly now in Chrome, but still not in Safari. Am using this for .overlayer .overlay.

.overlayer .overlay {
  background-color: #333;
  text-shadow: none;
z-index:99;
}

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;
}

Okay, got the text to display by adding a top margin of 195px to the .thumbnail .overlayer .overlay > div. I figured it was getting clipped off the top by the clip selector in .overlayer .overlay. Though I am still not clear on the difference between this selector and .overlayer .overlay.

Still need to figure out resizing.

Thanks Atelierbram! Actually, I think I've got this :) Just did everything on a smaller scale for the responsive layout.

Thanks for the article...will read this weekend...I've never totally understood why you need the > sign in some cases. And I fixed the typo.

As for the resizing of the larger circles to 304, I tried that but the overlays didn't fit anymore so I set them back to 290px. However, for the smaller circles, it worked better to add the extra 14px to the overlays...go figure.

The only issue on this now is that sometimes on reload, an expanded circle background and black text flicker up before going away. Do you know how I could get rid of this?

I tried that...but the overlay didn't fit all the way across the circle...I am now noticing that when the circles expand the overlay isn't expanding with them. Is there some way to resize them automatically as they expand and contract?

The hovering, clipping, and popup in this codepen I just made looks promising, I think, in Chrome and Firefox, but some 'slipping/flickering' ( on hover ) in Safari ... Any ideas?

@DesignLady94 : please don't be sorry ...; I'm doing this also for my own curiosity in this matter, ( something I'm eager to find an excuse for using oneday ) so congratulations, and maybe you can call this question solved! What I think of you're homepage is that it looks good, and I mean that, but that ( parts of ) the underlying css are still vulnerable. By making this codepen I experienced how tricky this issue really is. One thing, which is odd and hard to explain, but what can be improved in you're code is the .thumbnail .overlayer .overlay : ( 'cause of the padding ) the circles are just a tiny bit oval, so by compensating this in the height for this element, you will have a better fit. You can check this by temporarily disabling the clip property in Firebug or developer-tools:

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

Also noticed that, by disabling the border on the .thumbnail a , the layout breaks on hover; that can be a sign that the css is still not bulletproof . And I don't understand this jQuery.thumbFX.css file that you include, which says .css, but is really html. So good luck with optimizing: that's the trouble with using other's frameworks, plugins ( no matter how solid it is ) : there's always some 'dead wood' to get rid of!

I see what you mean about the layout breaking down....not sure how to fix though. I have removed the jQuery.thumbFX.css as I took the overlay css and put it in my style sheet, so it wasn't really needed. The latest version is now at debbierking.com.

So this will be the third and last codepen of clipped overlay on hover for images It's simply a combination of the two others, and only to be used if you like to experience javascript and css fighting The Ultimate Battle of Specificity. Which is bad, while it works ... although it is a improvement over the first one I made but would recommend anyone to use the one above with css transitions and lightweight inline jQuery : it's much cleaner and far more lightweight (and no more need to override inline css in the stylesheet by putting !important and [style] in there ). @DesignLady94 : please note that I had to do some tweaking of the layout in the css. Which is both good and bad news for you at the same time. Good news first: the slipping+flickering is no more. Has to do with lots of things, but one of the things I had to remove was the padding on the thumbnail wrapper. It gives unnecessary complications. But since the padding was there for reasons of giving some space between the pictures, I had to come up with something else, which was larger margins on the grid-unit-floats: span4. And after that the .container with had to be adapted with a few pixels more and/or less ( and in the media-queries ). Lastly I also put in an extra media-query with (min-width: 980px) , to be able to go with the mobile first approach. So keep that in mind if you would use the lean and mean variation above : not all compatible right now with what you have in bootstrap.css, but can of course be adapted. I would like to add that this latest codepen variation, I also strongly discourage for you, at least for you're homepage, it's best to go with the one above and drop the ThumbFx.

Speaking for myself, I would do the following: use the codepen as a template, just locally on the server on you're computer (localhost ~/) and copy the styles and markup on top of that: build it up again one line at the time, in some new html and css files that you make in a folder within you're ~/Sites folder. And yes be aware of repeated code, I didn't want to say but I did see some of it around in you're css. Ultimately comes from bad habits, copying and pasting snippets of code around and then forgetting about removing the repeats, which I also suffer from sometimes. If one takes the mobile first aproach however, you're life becomes easier, because you don't have to repeat and override so much in the media-queries.