Scale on Hover with Transition

Learn how to zoom/scale an element on hover with CSS.

  • scale(x,y) Defines a 2D scale transformation
  • scale3d(x,y,z) Defines a 3D scale transformation
  • scaleX(x) Defines a scale transformation by giving a value for the X-axis
  • scaleY(y) Defines a scale transformation by giving a value for the Y-axis
  • scaleZ(z) Defines a 3D scale transformation by giving a value for the Z-axis

Scale on Hover with Transition

HTML
<img class="scale" src="https://via.placeholder.com/150" alt="">

CSS

.scale { 
    width: 50px;
    transition: all .2s ease-in-out; 
}

.scale:hover {
    transform: scale(1.2); 
}

Scale on Hover with Transition

HTML
<img class="scale" src="https://via.placeholder.com/150" alt="">
CSS
.scale { 
    width: 50px;
    transition: all .2s ease-in-out; 
}

.scale:hover {
    transform: scale(0.9); 
}
756 Views
63550cookie-checkScale on Hover with Transition

Leave a Reply

Your email address will not be published. Required fields are marked *