sergofedor06,
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
</head>
<body>
<style>.zoom{
margin:auto;
overflow:hidden;
width:180px;
height:120px;
position:relative;
}
.zoom img{
-moz-transition:all 1s ease-out;
-o-transition:all 1s ease-out;
transition:all 1s ease-out;
-webkit-transition:all 1s ease-out;
}
.zoom:hover img{
-webkit-transform:scale(1.2);
-moz-transform:scale(1.2);
transform:scale(1.2);
-o-transform:scale(1.2);
}
.zoom:hover .zoomOverlay{
display:block;
opacity:0.7;
background-color:rgb(46,157,189);
}
.zoomOverlay{
background-image:url("http://thefinishedbox.com/files/freebies/hoverzoom/images/zoom.png");
background-position:center center;
background-repeat:no-repeat;
bottom:0;
left:0;
position:absolute;
right:0;
top:0;
-webkit-transition:all 0.7s ease-in-out;
-moz-transition:all 0.7s ease-in-out;
-o-transition:all 0.7s ease-in-out;
transition:all 0.7s ease-in-out;
opacity:0;
}
</style>
<div class="zoom"><a href="#"><img width="180" height="120" src="http://thefinishedbox.com/files/freebies/hoverzoom/images/thumbnail-1.jpg" /><div class="zoomOverlay" ></div></a></div>
<div class="zoom"><a href="#"><img width="180" height="120" src="http://thefinishedbox.com/files/freebies/hoverzoom/images/thumbnail-2.jpg" /><div class="zoomOverlay" ></div></a></div>
<div class="zoom"><a href="#"><img width="180" height="120" src="http://thefinishedbox.com/files/freebies/hoverzoom/images/thumbnail-3.jpg" /><div class="zoomOverlay" ></div></a></div>
</body>
</html>