Tags

, , , ,

zoom-effect-using-CSS3-transitionNow a days, we all are pretty much accustomed with using the CSS3 Transition effects. All of the modern browsers are having this feature support( Except some of the specific versions of IE ). Basically we use this to make our sites more beautifully functional. It makes our life easy. As we all know that it has reduced a bulk amount of effort which was being performed by jQuery or other libraries previously.

There are so many tricks and ways to use CSS3 transitions. But in this article, we will focus basically on zooming any element using the CSS3 Transition Scale property. It’s pretty much attractive when mouse hovering on some element will zoom out automatically. So, enough talk, lets start 🙂

For this, lets take an element. We are taking an image here.

<img src="image-path.png" alter="Zoom on hover.">

We will zoom the image on ‘hover’ case. It means, once we’ll take the cursor on the image, it’ll zoom in. So for this feature we will enlarge the image using the CSS3 Transition Scale property. So from now, forget your jQuery processes.

So for this first we have to set the design for the normal case for the image. This means that we have to use some css for the normal case and some for the image hover case. So lets see, what we can manage for the normal case and hover case for the zoom in effect. Normal Situation of the image :

img {
  /* Webkit for Chrome and Safari */
  -webkit-transform: scale(1, 1); // This is the scale for the normal size of the image.
  -webkit-transition-duration: 500ms;
  -webkit-transition-timing-function: ease-out;

  /* Webkit for Mozila Firefox */
  -moz-transform: scale(1, 1);
  -moz-transition-duration: 500ms;
  -moz-transition-timing-function: ease-out;

  /* Webkit for IE( Version: 11, 10 ) */
  -ms-transform: scale(1, 1);
  -ms-transition-duration: 500ms;
  -ms-transition-timing-function: ease-out;
}

Hover case of the Image :

img:hover {
  /* Webkit for Chrome and Safari */
  -webkit-transform: scale(1.2, 1.2); // This is the enlarged size scale of the image.
  -webkit-transition-duration: 500ms;
  -webkit-transition-timing-function: ease-out;

  /* Webkit for Mozila Firefox */
  -moz-transform: scale(1.2, 1.2);
  -moz-transition-duration: 500ms;
  -moz-transition-timing-function: ease-out;

  /* Webkit for IE( Version: 11, 10 ) */
  -ms-transform: scale(1.20, 1.20);
  -ms-transition-duration: 500ms;
  -ms-transition-timing-function: ease-out;
}

So this was the process to get the zoom effect. Now lets see, whats the way to use zoom out effect for an element. We will use the zoomed scale for the same image while in the normal case and for the hover case we’ll use the smaller size of the image( means the original size ). So lets see what we can figure out for both the cases.

Normal Situation of the Image :

img {
  /* Webkit for Chrome and Safari */
  -webkit-transform: scale(1.2, 1.2); // This is the enlarged size scale of the image.
  -webkit-transition-duration: 500ms;
  -webkit-transition-timing-function: ease-out;

  /* Webkit for Mozila Firefox */
  -moz-transform: scale(1.2, 1.2);
  -moz-transition-duration: 500ms;
  -moz-transition-timing-function: ease-out;

  /* Webkit for IE( Version: 11, 10 ) */
  -ms-transform: scale(1.20, 1.20);
  -ms-transition-duration: 500ms;
  -ms-transition-timing-function: ease-out;
}

Hover case of the Image :

img:hover {
  /* Webkit for Chrome and Safari */
  -webkit-transform: scale(1, 1); // This is the scale for the normal size of the image.
  -webkit-transition-duration: 500ms;
  -webkit-transition-timing-function: ease-out;

  /* Webkit for Mozila Firefox */
  -moz-transform: scale(1, 1);
  -moz-transition-duration: 500ms;
  -moz-transition-timing-function: ease-out;

  /* Webkit for IE( Version: 11, 10 ) */
  -ms-transform: scale(1, 1);
  -ms-transition-duration: 500ms;
  -ms-transition-timing-function: ease-out;
}

You can find those above change in our LIVE Demo. So this is it. Hope, this will help you guys.

Happy knowledge sharing 🙂

Advertisements