CSS – enlarge image on hover

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>
refresh

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>
refresh
Share this article: share on Google+ share on facebook share on linkedin tweet this submit to reddit

Comments

Click here to write/view comments