CSS3 > Animations

Zooming in CSS3

How to do Smooth Zooming in CSS3?

Smooth Zooming in CSS3 can be done by using transition CSS style by transitioning the transform css property.

        ul.myGallery li {
            float: left;
            list-style: none;
            border: 1px solid #c0c0c0;
            -webkit-transition: -webkit-transform 0.5s ease-in-out;
            -moz-transition: -moz-transform 0.5s ease-in-out;
            transition: transform 0.5s ease-in-out;

            ul.myGallery li:hover {
                -webkit-transform: scale(1.5);
                -moz-transform: scale(1.5);
                -o-transform: scale(1.5);
                transform: scale(1.5);
                -webkit-box-shadow: 4px 4px 10px red;
                -moz-box-shadow: 4px 4px 10px red;
                box-shadow: 4px 4px 10px red;

   <ul class="myGallery">
            <img src="../dotnetfunda.png" /></li>
            <img src="../itfunda.gif" /></li>
            <img src="../dotnetfunda.png" /></li>
            <img src="../itfunda.gif" /></li>

In the above code snippet, we have written a transform css property to do the transition.

Transition has following paramters

  • 1st parameter is the transition property
  • 2nd parameter is the transition duration
  • 3rd parameter is the transition timing function (ease | linear | ease-in | ease-out | ease-in-out| cubic-Bezier
In the above output, there are 4 images, if we place the cursor on particular image, that image is zoomed and appera as above in the webpage.

 Views: 576 | Post Order: 99

Write for us