css: zoom overlay on image thumbnail

I was thinking of an alternative method of doing this instead of the absolute positioning of another div. 

 <a href="image.png" class="screen-img" target="_blank">  
 <img src="image.png" width="100" />  
 </a>  

using this class:

 .screen-img {  
 display: inline-block;  
 margin-right: 5px;  
 background: #999 url(zoom.png) 50% 50% no-repeat;  
 height: 75px;  
 width: 100px;  
 img {  
 &:hover { opacity: 0.4; }  
 }  
 }  

The zoom.png is the magnify image, set as a background in the link tag.  So when the image is hovered, it will be a little transparent showing the magnify image from behind.

bonus: niffy code formatting gen for blogger - http://codeformatter.blogspot.ca/