Bonjour à tous, 

Je sais qu'il y a déjà plein de post similaires sur le web mais aucun d'eux ne me donne un résultat satisfaisant.

<div class="col-md-4 col-sm-4">
     <img src="images/p-1.png">
</div><!-- End col-md-4 -->

J'ai ce texte, et j'aimerais qu'un texte s'affiche au survol de ma souris, non pas avec un simple title="...." mais que l'image devienne un peu opaque afin qu'un texte noir s'insère dessus.

Par ailleurs, si quelqu'un ayant la réponse pouvait à la fois détaillé le code pour que je puisse le comprendre, je lui en serais fort reconnaissant

A+

Bonsoir, quelque chose comme ceci http://www.frogweb.fr/demos/figure-hover.html ?

EthanBertho a écrit:

Par ailleurs, si quelqu'un ayant la réponse pouvait à la fois détaillé le code pour que je puisse le comprendre, je lui en serais fort reconnaissant

Tu retrouves l'ensemble des balises et définitions => https://developer.mozilla.org/fr/docs/Web/HTML/Element

tu retrouves l'ensemble des propriétés CSS et définitions => https://developer.mozilla.org/fr/docs/Web/CSS/Reference

Avec cela tu devais pouvoir t'en sortir.

Bon dev.

Oui c'est tout à fait ce que je veux.

Cependant, dans toutes les solutions testées y compris celle la, j'obtiens :

<figure class="figure-hover">
<div class="col-md-4 col-sm-4">
<figcaption>
    <img src="images/p-1.png" alt="">
<p>Mon texte en bas de l'image qui apparait au survol de figure</p>
</figcaption>
</div><!-- End col-md-4 -->
</figure>

-
Edité par EthanBertho 20 février 2021 à 0:58:29

Bonsoir, <figcaption> c'est la description de l'image, sa légende plus précisément. Donc l ne faut pas mettre l'image dans la légende mais en dehors.

À noter d'ailleurs que <figcaption> ne peut être que le premier ou le dernier élément de <figure>, il ne peut pas y avoir d'intermédiaire, comme une div. Il faut corriger ça aussi.

<div class="col-md-4 col-sm-4">
<figure class="figure-hover">			
<img src="images/p-1.png" alt="">
<figcaption>
	<p>Mon texte en bas de l'image qui apparait au survol de figure</p>
</figcaption>
</figure>
</div><!-- End col-md-4 -->

Merci j'ai écouté vos conseils, et c'est presque bon. Cependant la superposition du "blanc" ne fait que la moitié de l'image.. je suppose que c'est le css ? Mais je ne trouve pas où...

Up svp

> je suppose que c'est le css

Bah peut-être, mais si tu ne le montres pas, on ne peut pas t'aiguiller

.figure-hover {
	position:relative;
	width:400px;
	height:200px;
	}
	.figure-hover img {
	vertical-align: top;
	}
	.figure-hover figcaption {
	position: absolute;
	bottom: 0;
	text-align: center;
	background-color: rgba(208,208,208,0.61);
	left: 0;
	right: 0;
	color: #000000;
	font-family: arial;
	overflow: hidden;
	transition: top 0.5s;
	top: 300px;
	}
	.figure-hover:hover figcaption {
	transition:top 0.8s;
	top:0
	}

-
Edité par EthanBertho 22 février 2021 à 19:39:32

Et donc tu veux que le blanc translucide prenne toute la hauteur ? Regarde la dernière ligne de ton .figure-hover figcaption, tu devrais comprendre.

Faudrait remplacer top par "full" ( quelque chose de l'equivalent ? )

Non

En effet, les valeurs de top, right, bottom et left (quand on est en absolu) signifient en quelque sorte la distance d'"accrochage" de l'élément à son parent positionné. Tu as left et right à 0 qui permettent d'avoir un élément en largeur complète, accroché des deux côtés comme un hamac : à ton avis, avec un bottom à 0, quelle valeur de top te permet d'avoir une hauteur complète ?

Je t'aurais dit top : 0px;

Cependant, cela ne fonctionne pas. Je présume donc que ma réponse est mauvaise :/

Ah ? Pourtant c'est ce que je voulais te faire trouver. Définis "ça ne fonctionne pas" : tu peux montrer une capture ?

Bonsoir, cela fonctionne correctement pour autant que le block parent ( <figure>) aie les mêmes dimension que l'image. Donc indique un width et un height de la dimension de l'image. Ce serra bon.

Maintenant le principe d'une class est d'être réutilisable. Si tu as des images de taille variable il ne faut pas fixer la taille du parent. Je changerais le display pour de l'inline-block. Le top: du <figcaption> ne doit plus   avoir une valeur fixe mais relative.

PS :  Le paragraphe dans le <figcaption> n'est pas nécessaire, si tu veux un décalage du texte par rapport au bord haut un padding-top ferra le taf.

Exemple :

<!doctype html>
<html lang="fr">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style>
            .figure-hover {
                position:relative;
                display: inline-block;
            }
            .figure-hover img {
                vertical-align: top;
            }
            .figure-hover figcaption {
                position: absolute;
                bottom: 0;
                text-align: center;
                background-color: rgba(208,208,208,0.61);
                left: 0;
                right: 0;
                color: #000000;
                font-family: arial;
                overflow: hidden;
                transition: top 0.5s;
                top: 100%;
            }
            .figure-hover:hover figcaption {
                transition:top 0.8s;
                top:0
            }


        </style>
    </head>
    <body>
        <div class="col-md-4 col-sm-4">
            <figure class="figure-hover">        
                <img src="https://picsum.photos/600/300" alt="">
                <figcaption>
                     Mon texte en bas de l'image qui apparait au survol de figure 
                </figcaption>
            </figure>
            <figure class="figure-hover">        
                <img src="https://picsum.photos/200/500" alt="">
                <figcaption>
                     Mon texte en bas de l'image qui apparait au survol de figure 
                </figcaption>
            </figure>
            <figure class="figure-hover">        
                <img src="https://picsum.photos/500/250" alt="">
                <figcaption>
                     Mon texte en bas de l'image qui apparait au survol de figure  
                </figcaption>
            </figure>
        </div><!-- End col-md-4 -->
    </body>
</html>

J'ai essayé avec la taille et cela ne fonctionne pas :( 

Du coup avec le code que tu m'as mis je n'ai plus à adapter la taille dans le css ?

EthanBertho a écrit:

Du coup avec le code que tu m'as mis je n'ai plus à adapter la taille dans le css ?

C'est cela oui, d’où l'exemple avec différentes tailles d'images. 

-
Edité par AbcAbc6 il y a environ 1 heure