How can I create this transparent image overlay on hover using CSS?

If the image is going to be contained in a div with a defined width, you can add an absolutely positioned div to the containing div that will serve as an overlay. Assume this code snippet and 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 will be

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

I'm sure you'll do that, which should give the hover effect. The following CSS should center the overlay and a few other things. See here for more info on centering divs both 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 violin