DIVI : Ajouter un effet de zoom

Dans DIVI, ajouter un effet zoom sur un résultat de blog n’est pas inclus en natif. Pour faire cela dans un bloc DP Post grid par exemple, vous devrez ajouter un peu de CSS à votre thème.

Cet ajout est très simple :

• Aller dans DIVI -> Option du thème
• Dérouler jusqu’en bas pour arriver à la section CSS

Dans cette section, nous allons ajouter 2 personnalisations de classe :

• Tout d’abord, il faut stipuler la durée de l’animation lors du passage au dessus. Cette option se réalise avec le selecteur “transition” auquel il faut stipuler une durée pour “transform”.
• Ensuite, il faut indiquer le type de transformation que l’on souhaite réaliser lors du passage de la souri sur l’élément (survol / hover)

Voici le code obtenu :

.brbl-post-card {
	transition: transform 0.5s;
}

.brbl-post-card:hover {
	-ms-transform: scale(1.05); /* IE 9 */
	-webkit-transform: scale(1.05); /* Safari 3-8 */
	transform: scale(1.05);
}

Attention : brbl-post-card correspond à la classe de l’élément.

Si ce code ne fonctionne pas, vérifier la classe de l’élément que vous souhaitez mettre en zoom