Problème d'affichage d'un texte derrière l'image à son survol
3 participants
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Problème avec un script, un code :: Archives des problèmes avec un code
Page 1 sur 1 • Partagez
Problème d'affichage d'un texte derrière l'image à son survol
Bonjour, j'ai essayé de mettre un code qui ferait apparaître un texte + des liens derrière l'image sur la page d'accueil au moment du survol avec la souris. Sauf que non seulement le texte reste au dessus de l'image, mais il faut être bien en haut de l'image pour qu'il apparaisse au survol. Je ne suis pas si je suis très claire... Bref, je voudrais qu'au moment du survol, l'image laisse place au texte derrière, et revienne quand la souris change de position.
Voici mon code HTML
Et le CSS
J'imagine qu'il y a beaucoup de répétition dans mon code et plein d'incohérences, j'ai recopier le code d'un ancien forum à moi, mais clairement ça ne marche pas comme prévu... Merci
EDIT: J'essaie avec un code plus simple, je galère autant :
Voici mon code HTML
- Code:
<td><div class="PAstaff"><div class="profilavatar"><span class="PAstaffimg"><span class="PAstaffmess">CECI EST MON TEXTE</span></span><div class="imgprofil" style=""><img src="https://66.media.tumblr.com/084aec32983cc6d7e9f7f8038f90ac78/tumblr_inline_plyplhWYmg1vt6thv_540.gif" style="width: 142px; border: #191919 1px solid; padding: 0px;opacity:0.9;"></div><span class="PAstaffimg"><span class="PAstaffmess">COUCOU</span></span></div><br><div class="PAstaffimg"><img src="https://66.media.tumblr.com/084aec32983cc6d7e9f7f8038f90ac78/tumblr_inline_plyplhWYmg1vt6thv_540.gif" style="width: 142px; border: #191919 1px solid; padding: 0px;opacity:0.9;"></div></div></td>
Et le CSS
- Code:
.PAstaff {
margin-top: 8px;
margin-right: 8px;
margin-left: 8px;
margin-bottom: 8px;
background: #f4f4f3;
padding: 16px;
float: left;
overflow: auto;
border: 1px solid #c5c5c5;
width: 140;
height:auto; }
.PAstaffimg {
transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-htm-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
transform: all;
-moz-transform: all;
-o-transform: all;
-htm-transform: all;
-webkit-transform: all;
transition: 1s;
-moz-transition: 1s;
-o-transition: 1s;
-htm-transition: 1s;
-webkit-transition: 1s;
width:auto;
height:auto;}
.PAstaffimg:hover {
transform: rotate(-5deg);
-moz-transform: rotate(-5deg);
-o-transform: rotate(-5deg);
-ms-transform: rotate(-5deg);
-htm-transform: rotate(-5deg);
-webkit-transform: rotate(-5deg);
transform: all;
-moz-transform: all;
-o-transform: all;
-htm-transform: all;
-webkit-transform: all;
transition: 1s;
-moz-transition: 1s;
-o-transition: 1s;
-htm-transition: 1s;
-webkit-transition: 1s; }
.PAstaffmess {
position: relative;
width:auto;
height:auto;
display: block;
margin: auto;
overflow: auto;
background: #ffffff;
color: #191919;
font-size: 11px;
opacity: 0;
-moz-opacity: 0;
-khtml-opacity: 0;
filter: alpha(opacity=0);
transform: all;
-moz-transform: all;
-o-transform: all;
-htm-transform: all;
-webkit-transform: all;
transition: 1s;
-moz-transition: 1s;
-o-transition: 1s;
-htm-transition: 1s;
-webkit-transition: 1s; }
.PAstaffmess:hover {
opacity: 1;
-moz-opacity: 1;
-khtml-opacity: 1;
filter: opacity=1;
transform: all;
-moz-transform: all;
-o-transform: all;
-htm-transform: all;
-webkit-transform: all;
transition: 1s;
-moz-transition: 1s;
-o-transition: 1s;
-htm-transition: 1s;
-webkit-transition: 1s; }
J'imagine qu'il y a beaucoup de répétition dans mon code et plein d'incohérences, j'ai recopier le code d'un ancien forum à moi, mais clairement ça ne marche pas comme prévu... Merci
EDIT: J'essaie avec un code plus simple, je galère autant :
- Code:
<div id="hcvph" style="background: url(https://66.media.tumblr.com/084aec32983cc6d7e9f7f8038f90ac78/tumblr_inline_plyplhWYmg1vt6thv_540.gif); background-repeat:no-repeat; background-size: 100%!important; width:142px;"><div class="hchov">
<n>NORAH</n></div></div>
<style type="text/css">#hcvph {width: 100%; height:100%; border: 1px solid #191919; position: aboslute;}.hchov n {display: block; width:142px; text-align: center; background: #191919; color: #fff; font: 9px roboto; text-transform: uppercase; padding: 10px; margin-top: 2px;}.hchov {opacity: 0; position: relative; top: -21px;width:142px; -webkit-transition:1s ease-in 0s;transition:0.6s ease-in 0.1s;}#hcvph:hover .hchov {opacity: 1; -webkit-transition:1s ease-in 0s;transition:0.6s ease-in 0.1s;}</style>
- Fichiers joints
Dernière édition par Lana Cleevest le Ven 5 Juin 2020 - 9:24, édité 1 fois
Re: Problème d'affichage d'un texte derrière l'image à son survol
Bonjour, Attention, cela fait 6 jours que nous n'avons pas de nouvelles concernant votre demande, si vous ne voulez pas voir votre sujet déplacé à la corbeille, merci de poster dans les 24h qui suivent ce message. Si votre sujet est résolu, merci d'éditer votre premier message et de cocher l'icône « résolu » |
Re: Problème d'affichage d'un texte derrière l'image à son survol
Oui, pardon, c'est toujours d'actualité. J'ai réussi à bidouiller quelque chose pour l'instant mais ça reste un code fragile et temporaire.
Re: 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:
CSS
Pour un exemple un peu plus travaillé: https://jsfiddle.net/Kehoru/uhpLecy0/29/
HTML
CSS
Pour un exemple un peu plus travaillé: hhttps://jsfiddle.net/Kehoru/uhpLecy0/15/
Les explications rapides que j'ai écrites dans le fiddle (lien^):
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.
Re: Problème d'affichage d'un texte derrière l'image à son survol
C'est parfait
Merci infiniment
Merci infiniment
Sujets similaires
» Texte derrière une image infobulle transparente
» Isoler un champ du profil derrière l'avatar (en survol)
» Hover: texte derrière texte
» problème de l`apparence de limage dans votre Annuaire F.A
» Probleme post+image (possibiliter que limage soi un lien aussi)
» Isoler un champ du profil derrière l'avatar (en survol)
» Hover: texte derrière texte
» problème de l`apparence de limage dans votre Annuaire F.A
» Probleme post+image (possibiliter que limage soi un lien aussi)
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Problème avec un script, un code :: Archives des problèmes avec un code
Page 1 sur 1
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum