show centered on top of the image when someone hovers over it.

.vpbutton {padding:4px;background-color:#EFEFEF;}
    .userbox img{padding:8px;background-color:#EFEFEF;}
    .userbox img:hover{opacity:.2;}
    <div class="userbox">
    <img src='img.png' style='height:120px;width:120px;border:1px solid #e5e5e5;'>
    </div>
    <div class="hello"> Hello</div>

I am trying to get the div with class="hello" to show centered on top of the image when someone hovers over it. any ideas please ?

while everyone was answering, i was making a jsfiddle of my own, also no javascript http://jsfiddle.net/jCUNm/

while everyone was answering, i was making a jsfiddle of my own, also no javascript http://jsfiddle.net/jCUNm/