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