CSS - Zoom Image on Rollover

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>
.zoom-img
{
  max-width: 100px;
  max-height: 50px;
  float:right;
  transition: transform 1.2s;
}
.zoom-img: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="zoom-img">

Links

• 3wschools - How to zoom on hover - Learn how to zoom/scale an element on hover with CSS.
• Pure CSS image zoom on hover inside a div - is confined inside a box.