1 résultat trouvé pour 00000000

Problème d'affichage d'un texte derrière l'image à son survol

Hello o/
J'avais commencé à écrire un long post explicatif mais.. problème de réseau.

garder son calme

Pour les deux méthodes:

1. Img

HTML

Code:: <div class="textonhover"><img src="lienimage" /> <span>Je suis un texte.<br> On peut me changer sans problème <em>(normalement :>)</em>.</span> </div>

CSS

Code:: .textonhover { position: relative; width: XXpx; /* largeur de l'image */ height: XXpx; /* hauteur de l'image */ } .textonhover span { position: absolute; left: 0; top: 0; width: 100%; height: 100%; transition: opacity .25s ease-in-out; opacity: 0; } .textonhover:hover span { opacity: 1; }

Pour un exemple un peu plus travaillé: https://jsfiddle.net/Kehoru/uhpLecy0/29/

2. Background-image

HTML

Code:: <div class="textonhover">Je suis un texte. On peut me changer sans problème (normalement :>).</div>

CSS

Code:: .textonhover { background-image: url('lienimage'); color: #FFFFFF00; transition-property: color, text-shadow; transition: .5s ease-in-out; } .textonhover:hover { color: #FFFFFF; text-shadow: 1px 1px 0px #000000; }

Pour un exemple un peu plus travaillé: hhttps://jsfiddle.net/Kehoru/uhpLecy0/15/
Les explications rapides que j'ai écrites dans le fiddle (lien^):

// (mSyx) Explications au cas où:
Dans les couleurs, tu remarqueras que la couleur noire (dans color et text-shadow) est écrite avec deux chiffres de plus de ce qu'on peut voir:
#00000000
il y a donc la couleur de base, noire (000000) + deux 0, qui sont l'opacité.

Donc, si on rajoute 00, ça signifie un pourcentage de 00%; donc invisible.
Pour remettre l'opacité à 100%, il suffit juste d'enlever les deux chiffres de la fin. C'est ce qui est fait dans le :hover pour faire réapparaître le texte.