Create the smooth zoom effect on hover an element with CSS

There are many ways to create the smooth zoom effect, but this way will show you we can do that easily with CSS.

Step 1: Create a HTML element with class called "zoom-box" like this

 <div class="zoom-box">Zoom box content</div>
Copy this code


Step 2: Add zoom effect for above element with some CSS code below

 .zoom-box {
 padding: 30px;
 background-color: rgb(41, 144, 204);
 transition: transform 0.5s;
 width: 200px;
 height: 200px;
 margin: 0 auto;
 box-sizing: border-box;
 color:#fff;
 font-size: 20px;
 display: flex;
 justify-content: center;
 align-items: center;
 text-align: center;
 border:5px solid #444;
}

.zoom-box:hover {
 -ms-transform: scale(1.5);
/* for IE 9 */
 -webkit-transform: scale(1.5);
/* for Safari 3-8 */
 transform: scale(1.5);
}
Copy this code

In this example, we use the transition property of the CSS with transition-property is transform (transition-duration is 0.5s )
In the hover event, we use the transform property with the 2D scale transformation (1.5 times)

Hover the box to see the effect in the Demo below:



Latest

{H}

How to pass the props to the children inside the React Component

{R}

React Responsive Timeline Component

{R}

React Tooltip Component

{C}

Create the Striped Table with CSS

{G}

Get an element of the iframe with Javascript

{A}

Advanced timer countdown React Component ( Days - Hours - Minutes - Seconds )

{H}

How to sum a number array in Javascript?

{R}

Responsive layout handle with Javascript use Media Queries

{H}

How to add or remove a CSS class with vanilla Javascript?

{T}

The best practice for redirect import a SVG file in the React App

Related

{C}

Create the Striped Table with CSS

{S}

Sticky an element when scroll down with CSS

{C}

Clipping and Masking Text effect with CSS

{M}

Make a popup box with CSS and Javascript