CSS - Zoom Image on Rollover

From NoskeWiki
Jump to navigation Jump to search


NOTE: This page is a daughter page of: CSS

Sometimes you want to am image to enlarge or zoom in when you rollover. That's actually really easy to do in CSS.

Image Zoom CSS

  max-width: 100px;
  max-height: 50px;
  transition: transform 1.2s;
.mapimg:hover {
  -ms-transform: scale(8.0); /* IE 9 */
  -webkit-transform: scale(8.0); /* Safari 3-8 */
  transform: scale(8.0);

<img src="_images/map_spread_zoomable.png" class="mapimg">