CSS transform:scale(2, 2) can be used on hover to resize (double) an image (horozontally and vertically). We can use any scale factor. Here is an example.
Example – enlarge image on hover keeping center as origin
<style type="text/css" media="screen">
.resize:hover {
transform: scale(2,2);
}
div {width: 100px; height: 50px; background-color: lightblue;padding:50px;}
</style>
<div><img class="resize" src="/img/elephant1_small.jpg">
</div>
Example – enlarge image on hover keeping top left as origin
<style type="text/css" media="screen">
.resize:hover {
transform: scale(2,2);
transform-origin: 0 0;
}
div {width: 100px; height: 50px; background-color: lightblue;padding:50px;}
</style>
<div><img class="resize" src="/img/elephant1_small.jpg">
</div>
