Créer un zoom d'image avec CSS sur Hover dans WordPress

Salut les gars,

Aujourd'hui, je vous propose un tutoriel très simple mais je pense qu'il peut vous être très utile.

Voyons comment nous pouvons créer une image avec zoom lors du survol de la souris comme suit :

Didacticiel vidéo

La première chose que nous allons faire est d'ajouter une classe à l'image afin de pouvoir appliquer le style exclusivement à cette image et non à toutes les images du web.

Dans le cas de mon site Web, ce serait:

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

Maintenant que nous avons créé la classe, nous allons ajouter le css, pour cela nous allons personnaliser -> Css supplémentaires :

Voici le code dont vous avez besoin :

.zoom {
    transition: transform .2s; 
}

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

Le css ci-dessus est composé de deux parties :

Agrandir l'image

Le CSS en charge de ces parties est le suivant :

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

Bien que ce code rende parfaitement le Zoom, il est très brusque puisqu'il passe d'une position à l'autre sans états intermédiaires.

Passer d'un état à l'autre progressivement

Afin de voir une animation fluide entre les deux positions, nous ajoutons la partie suivante au css :

.zoom {
    transition: transform .2s; 
}

Ici, nous lui disons de se transformer de la position de début à la position de fin en 0.2 seconde.

En changeant le temps on fait varier la vitesse de la transformation.

Comment vous pouvez voir est très simple et peut être très utile