Afficher une image différente au passage de la souris dans un

Bonjour,

J'ai voulu faire apparaître une image différente et plus grande dans un tooltip au passage de la souris sur une autre image plus petite.

J'ai réussit sauf que parfois la 1ère image (la petite donc) ne s'affiche pas du tout donc ma méthode ne doit pas être la bonne.

Voici ce que j'ai fait :

HTML :

<a href="" class="tooltip><img src="images/1.png" class="img-fluid" alt="1"><span><img src="images/2.png" class="img-fluid" alt="2"></span></a>

CSS :

.tooltip {
    text-decoration:none;
    position:relative;
}

.tooltip span {
    display:none;
}

.tooltip span img {
    float:left;
    margin:0px 8px 8px 0;
}

.tooltip:hover span {
    display:block;
    position:absolute;
    bottom:0;
    right:25%;
    z-index:1000;
    width:auto;
    max-width:650px;
    min-height:545px;
    overflow:hidden;
    padding-bottom: 20px;
}

J'ai d'ailleurs remarqué un autre problème qui doit être lié :
Parfois mon CSS ne se charge pas correctement (je le voit à la largeur de mes "cases" et à la police) et dans ces cas là l'image du problème ci-dessus s'affiche bien, mais quand le CSS se charge bien alors il y a le problème ci-dessus.

Voici mes CSS complets (bien sûr le site utilise les versions minifiées) :
https://static.breat.fr/css/theme-clair.css
https://static.breat.fr/css/theme-sombre.css (celui par défaut)

Si quelqu'un pouvait m'éclairer ça serait sympa.
Modifié par _laurent (02 Feb 2021 - 09:06)

Bonjour,
Peux-tu coloriser le code ?

Dans l'HTML, après "tooltip", tu as oublié les guillemets fermants : ".

--------------------------------------------------------------------------------------------------
Quand vous avez trouvé votre réponse, cochez "Résolu" et indiquez la meilleure solution.

J'ai essayé de le coloriser mais sans succès même après avoir désactivé tous les bloqueurs de pub etc.

Erreur de recopie (en supprimant les liens réels) car dans le vrai code il y est mais ça aurait pu être ça effectivement.

Je précise que la 1ère image fait 20x20px et l'autre fait 600x545px.
Modifié par Breat (01 Feb 2021 - 18:39)

Serait-il peut-être possible d'avoir le lien du site pour le constater ?

--------------------------------------------------------------------------------------------------
Quand vous avez trouvé votre réponse, cochez "Résolu" et indiquez la meilleure solution

Bien sûr. : https://breat.fr

C'est TOUT en bas la dernière phrase au milieu.

A moins que le problème vienne de mes navigateurs (Opera GX et Edge) je test toujours sur les 2.

"et si vous utilisez la fonction DNT de votre navigateur." ?

Où est le problème ?

Vous parlez de cette phrase ?

Oui enfin ça c'est la fin de la phrase, l'autre bout est a la ligne du dessus quand ça ne fonctionne pas, et tout est sur la même ligne quand ça fonctionne comme c'est sensé le faire
Modifié par Breat (01 Feb 2021 - 19:09)

Je suis désolé, je ne peux pas t'aider : ta page fait bugger mon ordinateur...

bizarre ça

Et l'eau,

Je viens d'ouvrir et finalement de supprimer mon sujet à propos des petits problèmes de l'édition des posts. Videz votre cache et tout devrait revenir à la normal.

@parsimonhi N'ayant pas mi moi même l'opacity (dans mon CSS perso) je n'avait pas pensé à Boostrap qui pouvait l'avoir ainsi que le display:block ce qui provoquait le retour à la ligne.

J'ai pu le corriger du coup merci en mettant opacity à 100% et un display:inline.

Par contre maintenant il n'y a plus l'autre image au passage de la souris

De plus j'aimerai si possible dans changer la taille du texte faire en sorte que le texte soit aligner de sorte qu'il tombe au milieu de l'image et non en haut, ainsi que l'image affichée au passage (quand ça refonctionnera xD) soit alignée en bas comme avant mais centrée.

Çà ne me fait pas de peine, j'en suis conscient c'est pourquoi je modifie petit à petit.

@niuxe D'accord merci ce sera plus clair effectivement avec la mise en forme des syntaxes.
Modifié par Breat (03 Feb 2021 - 21:20)