Categories
CSS Web development

CSS Zoom on Hover

CSS Zoom on Hover

Demo:

To create the CSS Zoom on Hover effect follow the steps below:

Hover over the square to see the effect:



Step1.

Add HTML

<div class="square"></div>

Step2.

Add CSS

.square {
  background-color: #2a9d8f;
  transition: transform .2s;
  width: 100px;
  height: 100px;  
}

.square:hover {
  transform: scale(1.4); 
}

Enjoy coding!