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

[Lana Cleevest]

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

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

Screenshot 2020-05-29 at 16.48.52.png Vous n'avez pas la permission de télécharger les fichiers joints.(78 Ko) Téléchargé 1 fois

Screenshot 2020-05-29 at 16.48.48.png Vous n'avez pas la permission de télécharger les fichiers joints.(82 Ko) Téléchargé 0 fois

[Chacha]

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 »

[Lana Cleevest]

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.

[mSyx]

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.

[Lana Cleevest]

C'est parfait

Merci infiniment