Ajouter calque opaque + descript sur photo:hover

Sujet résolu

8 janvier 2022 à 2:05:10

Bonjour à toutes et tous.

Je sèche sur un truc depuis au moins 6 heures.

J'ai une photo sur une page. Quand je passe ma souris sur une photo, celle-ci s'agrandit. Voici le code :

https://codepen.io/augustegusteau/pen/BawPbPm

Pour le zoom:hover tout va bien. Je veux juste qu'à la fin du zoom, un fond noir la recouvre avec un texte à l'intérieur. Et que l'image redevient comme avant quand on retire le curseur.

Depuis tout à l'heure je m'épuise en vain car j'essaye de me débrouiller seul, mais là je sèche vraiment.

Merci à vous d'éclairer ma lanterne !!!

AbcAbc6

8 janvier 2022 à 2:14:48

Bonsoir,

>> un fond noir la recouvre avec un texte à l'intérieur. Et que l'image redevient comme avant quand on retire le curseur.

comme ceci ?

http://www.frogweb.fr/demos/figure-hover.html

Gusteau

8 janvier 2022 à 2:21:11

Bonsoir et merci pour votre réponse

Oui c'est ça !

J'arrive à le faire sans le zoom, mais je n'arrive pas à faire les deux à la suite ...

J'ai l'impression que la réponse est vraiment évidente, et pourtant je ne m'en sors pas.

-
Edité par Gusteau 8 janvier 2022 à 3:31:03

AbcAbc6

8 janvier 2022 à 3:20:01

Je ne comprends pas ta difficulté, tu indiques un scale à l'image au survole de sont parent et scale au figcaption le tout avec une transition: all pour que ce soit fluide.

Comme ceci :

<!DOCTYPE html>
<html>
    <head>
        <title>Texte d'un figcaption qui apparait au survol</title>
        <meta charset="UTF-8">
        <style>
            .figure-hover {
                position:relative;
                width:400px;
                height:200px;
                margin: 200px auto;
            }
            .figure-hover img {
                vertical-align: top;
                transition: all 0.8s;
            }
            .figure-hover figcaption {
                position: absolute;
                bottom: 0;
                text-align: center;
                background-color: rgba(0,0,0,0.7);
                left: 0;
                right: 0;
                color: #fff;
                font-family: arial;
                overflow: hidden;
                top: 300px;
                transition: all 0.5s;
            }
            .figure-hover:hover figcaption {
                transition: all 0.8s;
                transform: scale(1.5);
                top:0
            }
            .figure-hover:hover img {
                transform: scale(1.5);
                transition: transform 0.8s;
            }

        </style>
    </head>
    <body>
        <figure class="figure-hover">
            <img src="https://picsum.photos/400/200" alt="">
            <figcaption>
                <p>Mon texte en bas de l'image qui apparait au survol de figure</p>
            </figcaption>
        </figure>
    </body>
</html>

Gusteau

8 janvier 2022 à 3:27:20

C'est exactement ça !

Je me sens tellement stupide. Je n'avais pas appliqué l'agrandissement sur .figure-hover:hover figcaption ...

Vraiment, merci.

Je te souhaite une excellente soirée / nuit !

-
Edité par Gusteau 8 janvier 2022 à 3:27:36

AbcAbc6

8 janvier 2022 à 3:34:32

Bonjour, de rien , au plaisir. Bonne nuit également.

Sujet résolu

Tu peux passer le sujet à "résolu" (bouton en haut à droite du sujet) et cliquer sur les pouces levés des messages qui t'ont aidé⋅e