Create Image Zoom with CSS on Hover in WordPress

Hello guys,

Today I bring you a very simple tutorial but I think it can be very useful for you.

Let's see how we can create an image with zoom when hovering over the mouse like the following:

Video Tutorial

The first thing we are going to do is add a class to the image so that we can apply style exclusively to this image and not to all the images on the web.

In the case of my website it would be:

<img class="zoom" src="https://comohacerunapagina.es/wp-content/uploads/2018/05/imagen-aleatoria.jpeg" alt="imagen aleatoria con zoom">

Now that we have the class created we are going to add the css, for this we are going to Customize –> Additional Css:

Here is the code you need:

.zoom {
    transition: transform .2s; 
}

.zoom:hover {
    transform: scale(1.5); 
}

The above css is made up of two parts:

Zoom image

The CSS in charge of these parts is as follows:

.zoom:hover {
    transform: scale(1.5); 
}

Although this code makes the Zoom perfectly, it is very abrupt since it passes from one position to the next without intermediate states.

Transition from one state to the other gradually

In order to see a smooth animation between both positions, we add the following part to the css:

.zoom {
    transition: transform .2s; 
}

Here we tell it to transform from start to end position in 0.2 seconds.

By changing the time we vary the speed of the transformation.

How you can see is very simple and can be very useful