CSS3 image zoom fade effect

In this post, i have explained about CSS3 image zoom fade effect. recently I have posted CSS3 related tutorials, iI got a good response. Because CSS3 it's very easy to design the website to implement animation effect is there. Here I have not used any script function, everything i have used CSS.

Live Demo

HTML

<html>
  <body>
  <div id="my_img" class="hover">
    <img class="first" width="500" src="emma1.jpg">
    <img class="second " width="500" src="emma-watson1.jpg">
  </div>
  </body>
  </html>

CSS

<style>
 #my_img {
    position:relative;
    width:600px;
    margin:0 auto;
   }
  #my_img img {
    position:absolute;
    left:0;
    -webkit-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
    -o-transition: all 1s ease-in-out;
    transition: all 1s ease-in-out;
  }

  #my_img img.second {
    -webkit-transform:scale(0,0);
    -moz-transform:scale(0,0);
    -o-transform:scale(0,0);
    transform:scale(0,0);
    opacity:0;

  }

  #my_img:hover img.second, #my_img.hover_effect img.second {
    opacity:1;
    -webkit-transform:scale(1,1);
    -webkit-transform-origin: second right;
    -moz-transform:scale(1,1);
    -moz-transform-origin: second right;
    -o-transform:scale(1,1);
    -o-transform-origin: second right;
    transform:scale(1,1);
    transform-origin: second right;
  }

  #my_img:hover img.first, #my_img.hover_effect img.first {
    -webkit-transform:scale(0,0);
    -webkit-transform-origin: first left;
    -moz-transform:scale(0,0);
    -moz-transform-origin: first left;
    -o-transform:scale(0,0);
    -o-transform-origin: first left;
    transform:scale(0,0);
    transform-origin: first left;
  }

  </style>

Thank you for visiting. if have any queries write your comments below.

"Excellence is a continuous process and not an accident."

- A. P. J. Abdul Kalam

Menu Link

27 August, 2015

CSS3 image zoom fade effect

HTML

CSS

Related Topics

No comments:

Post a Comment