[Résolu] Effets hover image (zoom + affichage du titre d’article) sur page catégorie (Créer un compte)

  • WordPress :5.3
  • Statut : résolu
11 sujets de 1 à 11 (sur un total de 11)
  • Auteur
    Messages
  • #2337698
    AdelineMartin
    Participant
    Padawan WordPress
    77 contributions

    Bonjour,

    Ma configuration WP actuelle :
    – Version de WordPress : 5.4
    – Version de PHP/MySQL : 7.0.33 / 5.5.30
    – Thème utilisé : Neve Enfant
    – Thème URI : https://adeline-martin.com
    – Extensions en place : Akismet Anti-Spam (4.1.4), Classic Editor (1.5), Etsy Shop (2.2), Forum_wordpress_fr (4.2), Juiz Social Post Sharer (1.4.10), MailPoet 3 (New) (3.46.7), Page Links To (3.3.3), Simple Custom CSS and JS (3.30), Slideshow (2.3.1), UpdraftPlus – Backup/Restore (1.16.23), WP Post Popup (3.5.3), Yoast SEO (13.4.1)
    – Adresse du site : https://adeline-martin.com
    – Nom de l’hébergeur : Apache

     

    Problème(s) rencontré(s) :

     

    Bonjour,

    Je tente depuis plusieurs jours d’appliquer des effets à mes miniatures d’articles.
    Je souhaiterais qu’au survol des miniatures, l’image fasse un léger zoom et affiche le titre de l’article.
    Exemple de ce que je veux obtenir : https://www.rovinacai.com/portfolio/
    Mon site actuellement : https://adeline-martin.com/category/illustration/ (j’ai seulement réussi à mettre un filtre gris au survol dans style.css)

    J’ai tenté en javascript mais je ne m’y connais pas assez bien.
    J’ai essayé également avec pas mal de plugins mais le soucis c’est que les versions gratuites ne proposent d’appliquer les effets qu’à un article, une image ou une page…
    Ce que j’aimerais c’est pouvoir appliquer l’effet à toutes les miniatures de ma page catégorie.
    Je pense qu’il faut jouer sur le fichier archive-post.php de mon thème mais je suis un peu perdue !

     

    Merci par avance 🙂

     

     

    #2337748
    ferman
    Participant
    Maître WordPress
    7016 contributions

    Bonjour,

    Essayez ce code CSS. Je pense que ça se rapproche de ce que vous voulez. Pour l’exemple j’ai mis deux titres en noir (sur deux images blanches).

    .post .content{
    padding: 0px;
    transition: transform 1s; /* Animation */
    margin: 0 auto;
    }
    .post .content:hover {
    transform: scale(1.2);
    z-index:auto;
    }
    .entry-title a{position:relative;
    bottom:150px;
    font-size:15px;
    opacity: 0;
    border-style:solid;
    padding-bottom:100px;
    padding-top:120px;
    padding-left:50px;
    padding-right:50px;
    }
    .entry-title a:hover{position:relative;
    opacity:1;
    border-style:none;
    filter:brightness(5);
    }
    #post-5171 .entry-title a:hover, #post-2982 .entry-title a:hover {color:black!important;
    font-weight:bold;
    }

    Edit: En regardant de nouveau, ce n’est pas exactement ça. Regardez quand même si ça vous convient.

    • Cette réponse a été modifiée le il y a 4 années et 2 mois par ferman.
    • Cette réponse a été modifiée le il y a 4 années et 2 mois par ferman.
    #2337752
    ferman
    Participant
    Maître WordPress
    7016 contributions

    Peut-être mieux avec scale (1.1). Question de goût.

    #2337784
    AdelineMartin
    Participant
    Padawan WordPress
    77 contributions

    Mais… merci ! Ça fonctionne !
    J’ai effectivement deux trois réglages à trouver (conserver le filtre gris au survol de toute l’image et j’aimerais que l’image subisse un zoom à l’intérieur de son format mais qu’elle ne grandisse pas).
    Mais c’est génial ! Je ne pensais pas pouvoir gérer ça avec seulement du CSS !
    Ce forum me bluffe d’efficacité à chaque fois, merci beaucoup !

    #2337786
    ferman
    Participant
    Maître WordPress
    7016 contributions

    Bonjour,

    Pour le voile gris, vous pouvez ajouter dans les règles .post .content:hover, opacity:0.5 à régler.

    Vous pouvez enlever tout ce qui se rapporte à « border ». Je m’en servais pour me repérer dans les paddings et ne l’ai pas enlevé.

    Pour maintenir la taille de l’image, ça doit être possible en rognant l’image. Je n’ai pas cherché à le faire. Regardez ICI.

    #2337796
    AdelineMartin
    Participant
    Padawan WordPress
    77 contributions

    Merci !

    Pour l’opacité, le soucis en ajoutant dans « post.content:hover » c’est que la transparence s’applique à tout, même au titre, j’avais réussi à n’agir que sur l’arrière plan avec ce code :

    « .nv-post-thumbnail-wrap a:hover {
    opacity: 0.20 !important;
    } »

    Il faut que je creuse 🙂

    Pour le zoom dans l’image, j’y suis presque ! En ajoutant « overflow:hidden » à plusieurs endroits j’ai pu conserver 3 arrêtes du carré, l’image continue juste à s’agrandir dans la zone du titre.

    Quand tout sera comme il faut je posterai le code complet.

    #2337892
    AdelineMartin
    Participant
    Padawan WordPress
    77 contributions

    Petite mise à jour, j’ai enfin réussi à forcer le zoom à se restreindre aux 4 arrêtes de l’image avant survol de la souris !
    Voici ce que ça donne : https://adeline-martin.com/category/illustration/

    J’ai encore des petits soucis avec les titres, savez-vous comment je peux faire pour que le titre apparaisse au survol de l’image ?
    Pour l’instant il n’apparaît qu’au survol du titre lui même.

    Après j’arrête de vous embêter ! 🙂

    Merci

    #2337898
    ferman
    Participant
    Maître WordPress
    7016 contributions

    Bonjour,

    Excellent. Pour avoir le titre au survol de l’image, ajoutez ce petit morceau de code:

    .entry-title a{position:relative;
    padding-bottom:120px;
    padding-top:20px;
    }

    Une petite limitation: cela marche au survol de la partie inférieure de l’image, pas supérieure. Je ne trouve pas ça gênant du tout: à moins d’attaquer l’image en traître par le haut il n’y a pas de problème. C’est une question de padding et il est impossible de régler ça de façon à couvrir également la zone supérieure. Vous pouvez voir ça avec l’inspecteur. C’est le prix à payer pour le overflow:hidden!

    Je ne me casserais pas la tête à remodifier tous les réglages.

    • Cette réponse a été modifiée le il y a 4 années et 2 mois par ferman.
    #2337964
    AdelineMartin
    Participant
    Padawan WordPress
    77 contributions

    Merci beaucoup pour votre réponse !
    J’ai testé avec le padding, en effet, la zone qui réagit au survol et affiche le titre est plus étendue mais j’ai soit le titre, soit l’image d’arrière plan qui baisse en opacité mais jamais les deux en même temps.
    Ce n’est pas grave, je chipote ! Je vais laisser ça comme ça et si un jour j’ai le courage de me replonger dedans j’essaierai de trouver une solution.

    En attendant voici mon code final pour ceux que ça intéresse :

    .layout-grid .content >* {
    margin: 0 0 0px !important;
    }

    .post .content{
    padding: 0px;
    transition: transform 0.3s;
    margin: 0 auto;
    overflow: hidden !important;
    }

    .nv-post-thumbnail-wrap a:hover {
    opacity:0.5 !important;
    }

    .post .content:hover {
    transform: scale(1.2);
    z-index:auto;
    overflow: hidden !important;
    }

    .article-content-col {
    overflow:hidden !important;
    }

    .blog-entry-title a, .entry-title a {
    opacity:0;
    position:absolute;
    color: #FFFFFF !important;
    z-index:auto;
    text-align:center;
    bottom:50%;
    top:45%;
    left:10px;
    right:10px;
    padding-left:20px;
    padding-right:20px;
    padding-bottom:120px;
    padding-top:20px;
    font-weight:bold;
    font-size:12px;
    }

    .entry-title a:hover {
    position:absolute;
    color: #FFFFFF !important;
    z-index:auto;
    text-align:center;
    bottom:50%;
    top:45%;
    left:10px;
    right:10px;
    padding-left:20px;
    padding-right:20px;
    font-weight:bold;
    font-size:12px;
    opacity: 1;
    text-decoration: none !important;
    }

     

    Merci pour votre aide ferman !

    • Cette réponse a été modifiée le il y a 4 années et 2 mois par AdelineMartin. Raison: erreur de code
    #2338035
    AdelineMartin
    Participant
    Padawan WordPress
    77 contributions

    J’ai finalement passé la journée dessus mais tout marche enfin à merveille !

    J’ai découvert la propriété CSS « div:not » qui permet d’exclure des éléments pour qu’ils ne subissent pas l’effet appliqué. J’ai aussi bidouillé les padding et toute l’image affiche maintenant le titre au survol.

    Merci encore @ferman !

    Si jamais d’autres passent par là, voici le nouveau code :

     

    .layout-grid .content > * {
    margin: 0 0 0px !important;
    }

    .post .content{
    padding: 0px;
    transition: transform 0.3s; /* Animation */
    margin: 0 auto;
    overflow: hidden !important;
    background-color: #474747;

    }

    .post:hover .content:hover div:not(.entry-title){
    opacity:0.3;
    }

    .post:hover .content:hover {
    transform: scale(1.2);
    }

    .article-content-col {
    overflow:hidden !important;
    }

    .blog-entry-title a, .entry-title a {
    width:auto;
    height:auto;
    opacity:0;
    position:absolute;
    color: #FFFFFF !important;
    text-align:center;
    bottom:30%;
    top:1%;
    left:10px;
    right:10px;
    padding-left:10%;
    padding-right:10%;
    padding-bottom:55%;
    padding-top:45%;
    overflow: visible !important;
    font-weight:bold;
    font-size:12px;
    }

    .entry-title a:hover {
    width:auto;
    height:auto;
    position:absolute;
    color: #FFFFFF !important;
    text-align:center;
    bottom:30%;
    top:1%;
    left:10px;
    right:10px;
    padding-left:10%;
    padding-right:10%;
    padding-top:45%;
    padding-bottom:55%;
    opacity: 1;
    text-decoration: none !important;
    overflow: visible !important;
    font-weight:bold;
    font-size:12px;
    }

    #2338043
    ferman
    Participant
    Maître WordPress
    7016 contributions

    Merci pour le retour. Maintenant c’est parfait; ça valait la peine d’y consacrer une journée. Le code sera une excellente « source d’inspiration » pour ceux qui auront le même genre de problème. Bravo.

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