Sélectionner une page


Dans cet article, je vais vous expliquer les étapes pour afficher le titre en flottant dans le module Divi Filter Portfolio.

J’ai écrit un article il y a quelques jours sur la façon de déplacer le titre et la méta vers la superposition dans le module de portefeuille standard. Toutefois, ces étapes ne fonctionneront pas avec le module de portefeuille filtrable.

Le code de cet article se concentre uniquement sur le portefeuille filtrable. Et comment afficher le titre lorsque vous passez votre souris sur l’image.

Voici un aperçu de ce à quoi cela ressemblerait à la fin.

Voir le titre sur le module de portfolio filtrable Hover Divi

1. Ajoutez une classe CSS personnalisée pour afficher le titre au survol

La première étape consiste à ajouter une classe CSS personnalisée au module Portfolio filtrable. C’est pour que le code n’affecte que ce module et rien d’autre sur le site Web.

Ouvrez le portefeuille filtrable Paramètres du module> Avancé> ID CSS et classes> Classe CSS puis ajoutez la classe portefeuille-titre-lwp à.

Voici une capture d’écran pour vous aider si vous ne savez pas où ajouter la classe CSS.

La classe CSS affiche les titres sur le module Hover Divi Filter Portfolio

2. Ajoutez un code CSS personnalisé pour afficher le titre au survol

L’étape suivante consiste à ajouter le code CSS personnalisé dans les options du thème Divi pour afficher le titre sur l’image lorsque vous la survolez.

Accédez au vôtre Tableau de bord WordPress> Divi> Options de conception> CSS personnalisé et ajoutez-y le code suivant.

.lwp-title-portfolio h2.et_pb_module_header {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    text-align: center;
    margin-top: 0px!important;
    z-index: 3;
    opacity: 0;     /*hides title when not hovered*/
}

/*make title visible on hover*/
.lwp-title-portfolio .et_pb_portfolio_item:hover h2.et_pb_module_header {
    opacity: 1;
}

/*Removes the icon*/
.lwp-title-portfolio span.et_overlay:before {
    content: '';
}

/*fix for overlay not showing when you hover over the title*/
.lwp-title-portfolio .et_pb_portfolio_item:hover span.et_overlay {
    opacity: 1;
    z-index: 3;
}

Voici une capture d’écran de l’endroit où vous devez exactement ajouter le code CSS dans les options du thème Divi.

Options du thème CSS personnalisé Divi pour afficher le titre tout en flottant dans le module portfolio

Cela signifie que nous avons terminé. Maintenant, le titre apparaîtra sur l’image lorsque vous la survolerez.

Vous pouvez modifier les styles du texte du titre comme la taille et la couleur dans le Paramètres du module> Conception> Texte à bascule de l’onglet Titre. Et les styles pour cela pour la superposition dans Paramètres du module> Conception> Superposition Changer.

3. Code CSS personnalisé pour inverser l’effet

Le code ci-dessus montre le titre en haut de l’image lorsque vous le survolez.

Et si vous voulez obtenir l’effet inverse? Où le titre et la superposition sont visibles par défaut et masqués lorsque vous survolez l’image avec votre souris.

Pour obtenir cet effet, au lieu d’ajouter le code partagé ci-dessus, vous pouvez utiliser ce code.

.lwp-title-portfolio h2.et_pb_module_header {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    text-align: center;
    margin-top: 0px!important;
    z-index: 3;
    opacity: 1; /*show title when not hovered*/
}

/*hide title on hover*/
.lwp-title-portfolio .et_pb_portfolio_item:hover h2.et_pb_module_header {
    opacity: 0;
}

/*Removes the icon*/
.lwp-title-portfolio span.et_overlay:before {
    content: '';
}

/*Show overly by default*/
.lwp-title-portfolio .et_pb_portfolio_item span.et_overlay {
    opacity: 1;
    z-index: 3;
}

.lwp-title-portfolio .et_pb_portfolio_item:hover span.et_overlay {
    opacity: 0;
    z-index: 3;
}

Voici quelques autres tutoriels Divi qui pourraient vous plaire.

N’oubliez pas de vous abonner à la newsletter pour recevoir les derniers tutoriels dans votre boîte de réception. Si vous avez trouvé cela utile ou si vous avez des questions sur ce didacticiel, veuillez laisser un commentaire ci-dessous.



Source link

Recent Posts