CSS - Zoom Image on Rollover

From NoskeWiki
Jump to navigation Jump to search

About

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

<style>
.mapimg
{
  max-width: 100px;
  max-height: 50px;
  float:right;
  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);
}
</style>

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


Links