-hover-L2-
-HTML-
<body> <div class="clearfix"> <p><a href="#"><img src="images/Pex1305359.jpg" alt="" width="200" height="150"></a></p> <p><a href="#"><img src="images/Pex712618.jpg" alt="" width="200" height="150"></a></p> </div> </body>
-CSS-
* { margin: 0; padding: 0; } .clearfix:after { content: ""; display: block; clear: both; } body { background: url(images/Bg-icon100.jpg); } div { width: 410px; margin: 20px; padding: 10px; background: white; } div p { width: 200px; float: left; } div p:not(:last-of-type) { margin-right: 10px; } div p img { width: 100%; vertical-align: bottom; } a { display: block; position: relative; } a:hover:after { content: ""; display: block; width: 200px; height: 150px; background: url(images/Pex1415378.jpg) no-repeat left top / cover; position: absolute; top: 0; left: 0; }