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
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>
À 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.
Pas d'aide concernant le code par MP, le forum est là pour ça :)
<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ù...
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 ?
Pas d'aide concernant le code par MP, le forum est là pour ça :)
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>
Je pense on s'est mal compris car le text-align: center est déjà mis. Je te joins un schéma pour te montrer ce que je veux, et j'avoue que je n'ai pas été assez clair..
Bonsoir, ha effectivement je n'avais pas compris que tu voulais un centrage vertical. Et le centrage horizontal était déjà la, je n'avais pas regardé.
On est bien d'accord que le background avec l'opacité doit lui aller jusqu'au dessus? Si oui voir le code plus bas.
Non pas de <br>, un <br> est fait pour créer un retour ligne, pas pour créer des espaces entre les éléments pour ce faire il y a les margin et padding.
Pour centrer réellement il faut modifier le HTML, comme décrit dans ce tuto
Si tu n'as pas de haute image, le fait d'ajouter un padding pourrait suffire. Attention que cela créer un dépassement il faut donc ajouté un overflow: hidden; sur le parent.
Je vois qu'en modifiant le padding-top, cela modifie la position du texte écrit.
Par ailleurs, j'ai réussi à lié mon hover au click, donc tout fonctionne parfaitement bien !
Je mets le post en résolu
Merci encore à vous deux les gars @lamecarlate @AbcAbc6
Apparition texte survol image
× Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
× Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.
Pas d'aide concernant le code par MP, le forum est là pour ça :)
Pas d'aide concernant le code par MP, le forum est là pour ça :)
Pas d'aide concernant le code par MP, le forum est là pour ça :)
Pas d'aide concernant le code par MP, le forum est là pour ça :)
Pas d'aide concernant le code par MP, le forum est là pour ça :)