Sélectionner une page


Effets de survol simples et attrayants dans Divi

J’en ai partagé un avec toi la semaine dernière A propos de moi mise en page. Si vous ne l’avez jamais vu auparavant, jetez-y un œil Ici! Et pendant que vous y êtes, regardez de près les effets de survol que j’ai appliqués dans la mise en page.

Aujourd’hui, je vais vous montrer comment obtenir ces effets de survol en utilisant de simples extraits de code CSS. Vous pouvez regarder la vidéo pour voir comment appliquer ces effets de survol à votre site Web basé sur Divi. Le code CSS et de brèves explications se trouvent dans le didacticiel suivant. Alors flottons!

1. Effet de survol du bouton Divi

Vous pouvez faire beaucoup à propos des effets de survol des boutons et je devrais probablement en discuter dans un article séparé. Mais ici, nous allons faire deux changements spécifiques: nous allons agrandir subtilement le bouton et ajouter une ombre pour un effet 3D amusant!

Le survol avec la souris agrandit et rapproche le bouton, comme s’il sautait à travers l’arrière-plan.

Vous pouvez appliquer ce CSS à n’importe quel module car il est toujours agréable de l’agrandir et d’ajouter une ombre de boîte subtile lorsque vous survolez.

Si vous ajoutez une classe CSS personnalisée de dl-hover-grow Pour votre module, voici le CSS que vous pouvez utiliser:

.dl-hover-grow:hover {
	transform:scale(1.05) translateY(-3px);
	box-shadow:1px 15px 35px -10px rgba(0,0,0,0.4);
}

2. Effets de survol sur les colonnes Divi

Consultez la section «Ce que je fais». Chaque colonne se compose de deux modules: blurb (pour l’icône) et texte (sur un arrière-plan distinct). L’utilisation de cet effet de survol crée l’illusion que chaque colonne est un élément. Cela crée un look net et cohérent. Et vous pouvez vous amuser à faire sauter ces colonnes!

Si vous ajoutez une classe CSS personnalisée de colonne-dl-up Pour votre ligne, voici le CSS que vous pouvez utiliser:

.dl-column-up .et_pb_column {
	transition: all .3s ease-in-out;
}
.dl-column-up .et_pb_column:hover {
	transform:translateY(-10px); 
}

3. Modifier un élément en survolant une section

Vous pouvez ajouter un effet de survol à l’ensemble de la section ou de la ligne afin qu’un seul élément de celle-ci soit affecté. Jetez un œil à la mise en page «Projet actuel». Si vous déplacez la souris sur une ligne, seule l’image change. La particularité est que l’effet de survol est activé sur l’image chaque fois que vous placez le curseur dans la ligne. Il n’est pas nécessaire que cela passe directement par l’image.

Vous pouvez le faire en ajoutant une classe CSS de série dl à la ligne et au module cible de cette ligne comme suit:

.dl-row:hover .et_pb_module {
	/* your CSS */
}

Inverser les filtres d’image pendant le survol

C’est une idée amusante! Vous vous êtes probablement demandé comment j’ai obtenu cet effet de survol de couleur dans cette section. Non, je n’ai pas ajouté de CSS personnalisé compliqué pour obtenir cet effet. Au lieu de cela, j’ai inversé le processus.

Vous pouvez ajouter des filtres à l’image telle qu’elle apparaît normalement en utilisant les options du module Divi (j’ai diminué la saturation et l’opacité et ajouté un peu de flou) et en supprimant simplement le filtre en flottant en utilisant la simple déclaration CSS: « filter: none; » De cette façon, pendant que votre image flotte, elle deviendra comme par magie floue et colorée!

C’est le CSS qui supprime les filtres d’image lorsque vous survolez une ligne avec une classe de série dl (et supprime également les filtres sur les appareils mobiles):

.dl-row .et_pb_image {
	transition: all 1s ease-in-out;
}
.dl-row:hover .et_pb_image {
	filter: none!important;
}
@media (max-width:980px) {
	.dl-row .et_pb_image {
		filter:none!important;
	}
}

5. Effets de survol pour les éléments d’un module

Si vous souhaitez uniquement ajouter un effet de survol à un élément d’un module, par exemple Par exemple, une icône dans un texte de présentation ou une icône de réseau social, vous devrez utiliser l’inspecteur de votre navigateur (outils de développement). Nous faisons cela pour vérifier la classe CSS de l’élément que vous souhaitez modifier en survol. La classe CSS personnalisée que nous ajoutons dans l’onglet Avancé affecte l’ensemble du conteneur parent. Et nous ne voulons pas que tout le texte de présentation change – juste l’icône.

C’est le CSS utilisé dans cet exemple. Blurb a une classe personnalisée de dl blurb et un module de suivi social dl-social::

.dl-social li a.icon:before {
	font-size:30px;
	transition: all .3s ease-in-out;
}
.dl-social li a.icon:hover:before {
	transform:scale(0.8);
	color:#fff;
}

.dl-blurb .et-pb-icon {
	transition: all .3s ease-in-out;
}
.dl-blurb:hover .et-pb-icon {
	transform:scale(0.8);
}

Dernières pensées

Les effets de survol sont tellement amusants! Mais peu importe à quel point vous l’aimez, n’oubliez pas d’être subtil et cohérent. Ces micro-interactions sont utiles et attrayantes, mais si vous en faites trop, l’effet peut jouer contre vous.

Que pensez-vous de ces effets de survol? Avez-vous essayé l’un de ceux-ci? Faites-moi savoir dans les commentaires!





Source link

Recent Posts