Afficher un nom lors d'un hover
lamontange Messages postés 130 Date d'inscription Statut Membre Dernière intervention -
Bonjour,
Je souhaiterais qu'un nom s'affiche lors du hover sur une image, avec une opactité de 0.5 (pour le fond).
Je multiplie les codes en vain. Voici un des derniers pas très catholique (CSS) :
figure {
position: relative;
display: inline-block;
overflow: hidden;
}
figcaption {
width: 100%;
height: 100%;
position: absolute;
cursor: pointer;
text-align: center;
vertical-align: text-bottom;
color:
#fff;
background-color: rgba(0,51,0,0.6);
padding-top: 40px;
font-family: "OpenSans Regular";
}
figure:hover figcaption {
bottom: 0;
}
Merci pour votre aide,
LM
Macintosh / Firefox 103.0
3 réponses
-
Bonjour,
Il manque la partie html et une description du problème rencontré car de mon coté ton code semble à peu près fonctionnel : https://jsfiddle.net/f0pzchry/
-
Bonjour Pitet,
J'étais trop défaitiste ;) Merci !!!! :D
Mais comment avoir une "transition" entre opacités
et donc supprimer le :
background-color: rgba(0, 51, 0, 0.6);
Idem pour une marge intérieure dans la figcaption ? Un margin: 5px (ou en %) ne fonctionne pas au niveau du top :/
J'ai essayé bcp de choses pour l'opacité.
Merci encore,
LM
-
Il me semblait avoir essayé cette solution, apparemment pas.
Pourtant, comme souvent, tout est logique si on s'y attarde un peu (auto-critique :D
Même si j'y ai passé un certain temps...
MERCI BEAUCOUP Pitet, très bon week-end à toi ;)
