Afficher un nom lors d'un hover Fermé

Question

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

Pitet · Answer

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/

lamontange · Answer

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

lamontange · Answer

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 ;)

Afficher un nom lors d'un hover

3 réponses

Discussions similaires