WooFrance Dépannage et support WordPress WooCommerce Forums Forum de Support WooCommerce Woocommerce – ajouter un effet Hover sur le texte catégorie

Étiqueté : 

3 sujets de 1 à 3 (sur un total de 3)
  • Auteur
    Messages
  • #398275
    SAGOT
    Participant
    Points: 15 pts

    Bonjour,

     

    Je souhaiterais ajouter un hover effect sur la div des catégories de produits woocommerce. J’ai déjà réussi à intégrer du code dans le css pour un premier effet de zoom sur les images mais j’aimerais y ajouter un overlay qui reprendrait le nom de la dite catégorie sur un fond avec une opacité donnée.

     

    Comment puis-je intégrer cela dans mes pages de catégories ?

     

    Merci à vous !

    depanagewp
    #398277
    Victor de Nivo-Web
    Participant
    Points: 726 pts
    Membre 2 étoiles

    J’ai un doute sur la faisabilité sans passer par du JS

    Cependant, j’utiliserai l’option :after

    div:after {
    visibility:hidden;
    }

    div:hover:after {

    visibility:visible;
    content:’Hello World’;
    background:red;

    }

    vous pouvez également le positionner via position: relative;

    Victor Gauthereau, Président de Nivo-Web agence Web sur Paris et Bordeaux.
    Vous avez apprécié mon aide ? Cliquez ici pour me remercier GRATUITEMENT
    Besoin d'une agence web pour votre projet ? Contactez-nous ?
    Site Web: https://nivo-web.fr
    Email: victor@nivo-web.fr
    Tel: 07 55 78 21 91
    Standard: 09 77 25 01 18
    Mes Ressources WordPress

    depanagewp
    #398279
    SAGOT
    Participant
    Points: 15 pts

    Hello,

     

    Malheureusement si j’utilise la balise content dans le css cela affichera le même texte sur toute les div sub-category

     

    Je recherche plutôt à reprendre le titre de la catégorie correspondante sur le hover

     

    Est-il possible d’intégrer ça dans le fichier functions.php par exemple ou archive-product.php ? En sus du CSS additionnel ?

    depanagewp
3 sujets de 1 à 3 (sur un total de 3)
  • Vous devez être connecté pour répondre à ce sujet.