Vérifiez vos informations

Il semblerait que les informations techniques de votre profil n'aient pas été actualisées depuis un certain temps... Pour que l'aide apportée vous soit efficace, il est important que ces informations soient à jour : prenez quelques secondes pour confirmer ou compléter les informations suivantes.


Lien de votre forum
Version de ce forum
Vous êtes le fondateur de ce forum
Vous avez modifié le CSS de ce forum
Vous avez modifié les templates de ce forum
Votre navigateur

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

Voir le sujet précédent Voir le sujet suivant Aller en bas

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

Message par Lana Cleevest le Ven 29 Mai 2020 - 17:08

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 I love you

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
Problème d'affichage d'un texte derrière l'image à son survol Attachment
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
Problème d'affichage d'un texte derrière l'image à son survol Attachment
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


Dernière édition par Lana Cleevest le Ven 5 Juin 2020 - 9:24, édité 1 fois
Lana Cleevest

Lana Cleevest
Nouveau membre

Messages : 18
Inscrit(e) le : 27/05/2020

Voir le profil de l'utilisateur https://thesleeve.forumactif.com/
Lana Cleevest a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème d'affichage d'un texte derrière l'image à son survol

Message par Chacha Hier à 9:29

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

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 »
Chacha

Chacha
Modéractif
Modéractif

Masculin
Messages : 62947
Inscrit(e) le : 21/08/2010

Voir le profil de l'utilisateur https://forum.forumactif.com/
Chacha a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème d'affichage d'un texte derrière l'image à son survol

Message par Lana Cleevest Hier à 12:05

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.
Lana Cleevest

Lana Cleevest
Nouveau membre

Messages : 18
Inscrit(e) le : 27/05/2020

Voir le profil de l'utilisateur https://thesleeve.forumactif.com/
Lana Cleevest a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème d'affichage d'un texte derrière l'image à son survol

Message par mSyx Hier à 22:18

Hello o/
J'avais commencé à écrire un long post explicatif mais.. problème de réseau. :O: 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.
mSyx

mSyx
****

Masculin
Messages : 283
Inscrit(e) le : 22/09/2012

Voir le profil de l'utilisateur https://forum.forumactif.com/
mSyx a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème d'affichage d'un texte derrière l'image à son survol

Message par Lana Cleevest Aujourd'hui à 9:24

C'est parfait cheers

Merci infiniment
Lana Cleevest

Lana Cleevest
Nouveau membre

Messages : 18
Inscrit(e) le : 27/05/2020

Voir le profil de l'utilisateur https://thesleeve.forumactif.com/
Lana Cleevest a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut


Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum