如何在使用CSS悬停时创建此透明图像叠加？

Question

I'm looking for advice to reproduce ( see this image ) effect for my image hovers. My problem is that my images are fluid, and I haven't really been able to find any good tutorials on that subject combined with overlays.

I'm assuming I have to create a transparent png (white area + circle) which overlays the image on hover, and then the text overlaying that? And it all needs to resize accordingly with the image itself. Also, the top border is not part of the image, it's generated with CSS, and I don't want that to be overlayed if possible.

Could anyone kindly point me in the right direction, or give advice if there's a better implementation? I'm rather lost.

Thank you in advance. :)

Answer 1

If the image is going to be contained in a div with a defined width, you can add an absolutely positioned div to that containing div that'll act as the overlay. Assuming this snippet and that the opacity of the overlay is set to zero

<div class="picholder">
    <img class="fancypics" src=http://placehold.it/500x650></img>
    <div class="overlay"><p class="text_box">Hello World!</p></div>
</div>

the css for the hover effect would be

.picholder:hover .overlay{opacity:1;}
.picholder:hover .fancypics{opacity:0.7;}

That should create the hover effect, I believe you're going for. The following css should center the overlay and some other stuff. see here for more on centering divs vertically and horizontally

.overlay {
  bottom: 0;left: 0; top: 0; right: 0;
  height: 150px;
  width: 150px;
  margin: auto;
  position: absolute;
  background-color:#3f3f3f;
  border-radius: 50%;
  opacity:0;
}
.fancypics{width:100%;}
.text_box{
  color:white;
  weight:bold;
  font-size:2em;
  padding:10px;
  padding-bottom:50%;
  text-align:center;
}

and of course the fiddle

Answer 2

Just use background-color to set a transparent color:

Demo here

HTML

<div class="overlay">
    <div>Hello</div>
    <span>January 16. 2014</span>
</div>

CSS

.overlay {
    position:relative;
    width:200px;
    height:200px;
    border-radius:50%;
}
.overlay:hover {
    background:rgba(0,0,0,0.5);
}
.overlay > div {
    position:absolute;
    color:#fff;
    font:50px sans-serif;
    width:100%;
    top:33%;
    text-align:center;
}
.overlay > span {
    position:absolute;
    color:#fff;
    font:12px sans-serif;
    width:100%;
    top:67%;
    text-align:center;
}

The stippled line at the border of the upper text can be achieved using either a border-bottom or a single-line image which you attach as background to the div.

Hope this helps.