CSS3 – Image zoom on mouse hover

With CSS3 transition property, we can do some simple animation effects. The following example will zoom in the image when mouse hover.

<!DOCTYPE html>
<html>
<head>
  <title>Eureka! | CSS3 - Image zoom on mouse hover</title>
  <style type="text/css">
    .image-wrapper {
      width: 200px;
      height: 200px;
      overflow: hidden;
    }

    .image {
      width: 200px;
      height: 200px;
      position: relative;
      left: 0;
      top: 0;
      transition: all 1s linear;
    }

    .image:hover {
      width: 400px;
      height: 400px;
      left: -100px;
      top: -100px ;
    }
  </style>
</head>
<body>
  <div class="image-wrapper">
    <img class="image" src="https://ykyuen.files.wordpress.com/2014/03/mickey-mouse.jpg">
  </div>
</body>
</html>

Done =)

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s