Enlarge image on hover – HTML

Enlarge image on Hover

 
Here are some examples showing how to zoom in on an image without clicking.
 
Example #1: Using ‘onmouseover’ event attribute.

Code #1:
<img src="http://www.vpskingdom.com/kb/wp-content/uploads/2014/06/vpsk.png" height="auto" width="160px" onmouseover="this.width='320'; this.height='auto'" onmouseout="this.width='160'; this.height='auto'">
 
 
Example #2: Using HTML & CSS.


Code #2:
<style>.thumbnail:hover {position:relative; width:100%; height:auto; display:block; z-index:999;}</style>
<img src="http://www.vpskingdom.com/kb/wp-content/uploads/2014/06/banner.png" class="thumbnail" height="auto" width="250" />

wizard has written 12 articles

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>