Post
Ask Question

Zoom Effect Using CSS3

Introduction

 
In this article, we will discuss some examples of a zoom effect using the transform and transition properties of CSS3. Zoom means making the size of an element larger or smaller than its current size.
 
There are three zoom examples as in the following:
  1. Zoom using transform: scale(2); and transition: all .3s ease-out;
     
  2. Zoom using two images. The second image will be shown on hover of just the right of the current Image without disturbing any element on the page.
     
  3. Zoom using two images. The second image will be shown on hover at a specified location relative to the current position using transform: translate(0,200px); without disturbing any element on the page.
Example 1
 
We are using 8 Rangoli images to show the zoom effect. First, we discuss a little about the code that is responsible for the zoom effect.
  1. transition: all .3s ease-out: transition property can have the following values.
     
    transition: [transition-property] [transition-duration] [transition-timing-function] [transition-delay];
     
    1. transition-property: It can have all (the initial value) or none, or a comma-separated list of properties.
       
    2. transition-duration: It can have values in seconds and milliseconds. It determines how much time will take to complete the transition.
       
    3. transition-timing-function: This property is used to specify how the pace (speed) of the transition changes over its duration. It can have a predefined set of values:
       
            => linear will maintain the same speed throughout the transition.
            => ease-in will start the animation slowly and finish at full speed.
            => ease-out will start the animation at full speed, then finish slowly.
            => ease-in-out will start slowly, be fastest in the middle of the animation, then finish slowly.
            =>ease is like ease-in-out, except it starts slightly faster than it ends.
       
    4. transition-delay: It is responsible for a delay of time from when the transition is triggered. 
       
  2. transform: scale(2): The scale method increases or decreases the size of the element. Scale values without a unit work as a multiplier. So, scale(2) means just double the size of the element. If we are providing two values(x, y) they stretch the element horizontally and vertically.
     
    Code 1
    1. <!DOCTYPE HTML>  
    2. <html>  
    3.     <head>  
    4.         <style type="text/css">     
    5.             div{  
    6.                 padding:20%;  
    7.                 float: left;  
    8.             }             
    9.             .rangoliPic {  
    10.                 width: 200px;   
    11.                 height:200px;  
    12.                 -webkit-transition: all .3s ease-out;  
    13.                 -moz-transition: all .3s ease-out;  
    14.                 -o-transition: all .3s ease-out;  
    15.                 transition: all .3s ease-out;  
    16.             }  
    17.             .rangoliPic:hover {  
    18.                 -moz-transform: scale(2);  
    19.                 -webkit-transform: scale(2);  
    20.                 -o-transform: scale(2);  
    21.                 -ms-transform: scale(2);              
    22.                 transform: scale(2);              
    23.             }         
    24.         </style>        
    25.     </head>  
    26.     <body>  
    27.         <div>  
    28.             <img class="rangoliPic" src="Images/rangoli1.jpg" />  
    29.             <img class="rangoliPic" src="Images/rangoli2.jpg" />  
    30.             <img class="rangoliPic" src="Images/rangoli3.jpg" />  
    31.             <img class="rangoliPic" src="Images/rangoli4.jpg" />  
    32.             <img class="rangoliPic" src="Images/rangoli5.jpg" />  
    33.             <img class="rangoliPic" src="Images/rangoli6.jpg" />  
    34.             <img class="rangoliPic" src="Images/rangoli7.jpg" />  
    35.             <img class="rangoliPic" src="Images/rangoli8.jpg" />            
    36.         </div>          
    37.     </body>     
    38. </html>  
    Result
     
    result output
     
Example 2
 
We are using the same images in this example. But we are using the image twice. This example will be helpful when we want to show the image at just the right side position of the image. The points to remember are the following.
  1. position:absolute: This is applied to the second image so that when the second image is shown in the browser as a result of a hover, it will not disturb other elements of the page.
     
  2. width: 0px: To hide the second image.
     
  3. transition: width 0.3s linear 0s: We have discussed that in Example 1.
     
    Code 2
    1. <!DOCTYPE HTML>  
    2. <html>  
    3.     <head>  
    4.         <style type="text/css">  
    5.             div{  
    6.                 padding:15%;  
    7.                 float: left;  
    8.             }  
    9.   
    10.             .rangoliPic{  
    11.                 width: 200px;  
    12.                 height:200px;  
    13.             }  
    14.             .rangoliPicBig{  
    15.                 position:absolute;  
    16.                 width: 0px;  
    17.                 transition: width 0.3s linear 0s;  
    18.                 z-index: 10;  
    19.             }  
    20.             .rangoliPic:hover + .rangoliPicBig{  
    21.                 width:400px;  
    22.                 height:400px;                 
    23.             }         
    24.   
    25.         </style>        
    26.     </head>  
    27.     <body>  
    28.         <div>  
    29.   
    30.             <img class="rangoliPic" src="Images/rangoli1.jpg" />            
    31.             <img class="rangoliPicBig" src="Images/rangoli1.jpg" />  
    32.   
    33.             <img class="rangoliPic" src="Images/rangoli2.jpg" />  
    34.             <img class="rangoliPicBig" src="Images/rangoli2.jpg" />  
    35.   
    36.             <img class="rangoliPic" src="Images/rangoli3.jpg" />  
    37.             <img class="rangoliPicBig" src="Images/rangoli3.jpg" />  
    38.   
    39.             <img class="rangoliPic" src="Images/rangoli4.jpg" />  
    40.             <img class="rangoliPicBig" src="Images/rangoli4.jpg" />  
    41.   
    42.             <img class="rangoliPic" src="Images/rangoli5.jpg" />  
    43.             <img class="rangoliPicBig" src="Images/rangoli5.jpg" />  
    44.   
    45.             <img class="rangoliPic" src="Images/rangoli6.jpg" />  
    46.             <img class="rangoliPicBig" src="Images/rangoli6.jpg" />  
    47.   
    48.             <img class="rangoliPic" src="Images/rangoli7.jpg" />  
    49.             <img class="rangoliPicBig" src="Images/rangoli7.jpg" />  
    50.   
    51.             <img class="rangoliPic" src="Images/rangoli8.jpg" />  
    52.             <img class="rangoliPicBig" src="Images/rangoli8.jpg" />  
    53.               
    54.         </div>          
    55.     </body>     
    56. </html>  
    Result
     
    image output
Example 3
 
This example is the same as Example 2. The only difference is that the result image position is different. If we want to show a result image at a different position then we use:
 
transform: translate(0,200px); : translate moves the element from its current location.
 
Code 3
  1. .rangoliPic:hover + .rangoliPicBig{  
  2. width:400px;  
  3. height:400px;  
  4. transform: translate(0,200px);   
  5. }   
Result
 
program output
 
 

Conclusion

 
In this article, we studied Zoom Effect Using CSS3.


Similar Articles