Post
Ask Question

Scaling And Shrinking Effects On HTML Elements Using CSS3

Introduction

 
In this article, we will learn how to add a shrinking and growing effect on an image whenever a user hovers the mouse over an image. This effect is applied by shrinking or growing the size of the image. The shrink effect takes it's time to shrink the image, and that results in a beautiful animation effect on the image.
 

Scaling effect

 
The name seems to be self-explanatory and that's true. The scale effect is used for shrinking and growing the HTML element. Please note that it can shrink and grow an HTML element, not just an image. Scaling effects comes in four variants. These variants are as follows:
  1. Equal Scaling on both axes: scale(K)
  2. Unequal scaling on X and Y axes: scale(K1, K2)
  3. Scaling around X-axes: scaleX(K)
  4. Scaling around Y-axes: scaleY(K)
In all the preceding methods K is an integer scaling or shrinking factor. If K is less then one then it is a shrinking effect and if it is greater then one then it is a scaling effect. When K is equal to one, the element returns to its original position.
 
Mathematically it can be represented as follows:
If K>1 : Scaling
If K<1 : Shrinking
If K=1 : Original Size.
So let's see the preceding methods in action. First comes the equal scaling on both axes.
 

Equal Scaling on both axes: scale(K)

  1. <!DOCTYPE html>  
  2. <html>  
  3.    <head>  
  4.       <metacharset="utf-8">  
  5.       <title>JS Bin</title>  
  6.    </head>  
  7.    <body>  
  8.       <divid="imgbox-shrink">  
  9.       <imgsrc="http://www.c-sharpcorner.com/UploadFile/AuthorImage/4aac15.jpg"/>  
  10.       </div>  
  11.       <divid="imgbox-grow">  
  12.       <imgsrc="http://www.c-sharpcorner.com/UploadFile/AuthorImage/4aac15.jpg"/>  
  13.       </div>  
  14.    </body>  
  15. </html> 
The above HTML will create two simple divs with an image placed in it. Now to add an effect to it use the following CSS3:
  1. #imgbox-shrink {  
  2.     border: 2px dotted black;  
  3.     width: 160px;  
  4.     height: 160px;  
  5. }  
  6.  
  7. #imgbox-shrink img {  
  8.     -webkit-transition: all 0.5s linear;  
  9.     -moz-transition: all 0.5s linear;  
  10.     -ms-width: all 0.5s linear;  
  11.     -o-width: all 0.5s linear;  
  12. }  
  13.  
  14. #imgbox-shrink img:hover {  
  15.     -webkit-transform: scale(0.5);  
  16.     -moz-transition: scale(0.5);  
  17.     -ms-width: scale(0.5);  
  18.     -o-width: scale(0.5);  
  19. }  
  20.  
  21. #imgbox-grow {  
  22.     border: 2px dotted black;  
  23.     width: 160px;  
  24.     height: 160px;  
  25. }  
  26.  
  27. #imgbox-growimg {  
  28.     -webkit-transition: all 0.5s linear;  
  29.     -moz-transition: all 0.5s linear;  
  30.     -ms-width: all 0.5s linear;  
  31.     -o-width: all 0.5s linear;  
  32. }  
  33.  
  34. #imgbox-grow img:hover {  
  35.     -webkit-transform: scale(1.5);  
  36.     -moz-transition: scale(1.5);  
  37.     -ms-width: scale(1.5);  
  38.     -o-width: scale(1.5);  
  39. } 
Most of the code is a boilerplate for the sake of compatibility among various browser rendering engines. The important point in the code above is "scale(0.5)". It's a CSS3 effect that is used to scale an element by the scaling factor K. Here K is any number pass to scale function. As K is less than one, so the shrinking will occur as expected. "scale(1.5)" is a case where K is greater than one, so the scaling will occur by the factor of 1.5 on both the axes as expected.
 
   
 

Unequal scaling on X and Y axes: scale(K1, K2)

 
When two different values of K are passed to scale function say K1 and K2 then the element is scaled by a K1 factor on the X-axes and by a K2 factor on the Y-axes.
  1. <div id="imgbox-mix">  
  2. <img src="http://www.c-sharpcorner.com/UploadFile/AuthorImage/4aac15.jpg"/>  
  3. </div>   
CSS
  1. #imgbox-mix {  
  2.     border: 2px dotted black;  
  3.     width: 160px;  
  4.     height: 160px;  
  5. }  
  6.   
  7. #imgbox-mix img {  
  8.     -webkit-transition: all 0.5s linear;  
  9.     -moz-transition: all 0.5s linear;  
  10.     -ms-width: all 0.5s linear;  
  11.     -o-width: all 0.5s;  
  12. }  
  13.   
  14. #imgbox-mix img:hover {  
  15.     -webkit-transform: scale(0.5, 1.5);  
  16.     border: 2px dotted black;  
  17.     -moz-transition: scale(0.5, 1.5);  
  18.     -ms-width: scale(0.5, 1.5);  
  19.     -o-width: scale(0.5, 1.5);  
  20. } 
As you can see I have passed two different scaling factors in the scale function, one is less the 1 and the other is greater than 1. So inaction, the image will be scaled on the Y axes and shrank along the X-axes.
 
 

Scaling around X-axes: scaleX(K)

 
In this effect, we apply a scaling effect only along the X-axes and in the result, the element is scaled by a factor of K.
  1. <div id="imgbox-scaleX">  
  2. <img src="http://www.c-sharpcorner.com/UploadFile/AuthorImage/4aac15.jpg"/>  
  3. </div> 
CSS
  1. #imgbox-scaleX {    
  2.     border: 2px dotted black;    
  3.     width: 160px;    
  4.     height: 160px;    
  5. }    
  6.     
  7. #imgbox-scaleX img {    
  8.     -webkit-transition: all 0.5s linear;    
  9.     -moz-transition: all 0.5s linear;    
  10.     -ms-width: all 0.5s linear;    
  11.     -o-width: all 0.5s    
  12. }    
  13.     
  14. #imgbox-scaleX img:hover {    
  15.     -webkit-transform: scaleX(0.5);    
  16.     border: 2px dotted black;    
  17.     -moz-transition: scaleX(0.5);    
  18.     -ms-width: scaleX(0.5);    
  19.     -o-width: scaleX(0.5);    
  20. }  
As per the preceding CSS, the image will be shrinked along the X-axes is the value passed to the scale function is less than one. The point to note here is that the image height remains unaffected by this scaling but the width of the image is reduced by 0.5.
 
4 
 

Scaling around Y-axes: scaleY(K)

 
This works exactly in the same way as "scaleX(K)" except that the scaling function is applied on the Y axes instead of the X-axes. In this effect, the height of the image is changed and the width of the image remains unaffected. Check out the following demo
  1. <dividdivid="imgbox-scaleY">  
  2. <imgsrcimgsrc="http://www.c-sharpcorner.com/UploadFile/AuthorImage/4aac15.jpg"/>  
  3. </div>  
CSS
  1. #imgbox-scaleY{  
  2.   border:2px dotted black;  
  3.   width:160px;  
  4.   height:160px;  
  5. }  
  6. #imgbox-scaleY img{  
  7.   -webkit-transition:all 0.5s linear;  
  8.   -moz-transition:all 0.5s linear ;  
  9.   -ms-width:all 0.5s linear ;  
  10.   -o-width:all 0.5s  
  11. }  
  12. #imgbox-scaleY img:hover{  
  13.   -webkit-transform:scaleY(0.5);  
  14.   border:2px dotted black;  
  15.   -moz-transition:scaleY(0.5) ;  
  16.   -ms-width:scaleY(0.5) ;  
  17.   -o-width:scaleY(0.5) ;  
  18. }  
 
Live Demo List
  1. Equal Scaling on both axes: scale(K)
  2. Unequal scaling on X and Y axes: scale(K1, K2)
  3. Scaling around X-axes: scaleX(K)
  4. Scaling around Y-axes: scaleY(K)

Summary

 
That is all I have for this article. I hope you have enjoyed reading this article. It has shown some very basic effects but can add stars to your website if it's used sensibly. In case of any doubt feel free to ask in the comments section. 


Similar Articles