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>
  <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 ;
  <div class="image-wrapper">
    <img class="image" src="https://ykyuen.files.wordpress.com/2014/03/mickey-mouse.jpg">

Done =)


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 )

Facebook photo

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

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.