Créer une "apparition" en hover

[Yunie16]

Détails techniques

Version du forum : ModernBB
Poste occupé : Fondateur
Navigateur(s) concerné(s) : Google Chrome
Personnes concernées par le problème : Tous les utilisateurs
Lien du forum : (lien masqué, vous devez poster pour le voir)

Description du problème

Bonsoir !

Pour le changement de thème de notre forum, nous avons décidé de revoir touuuutes nos fiches (promis elles sont toutes déjà finies) et je viens vers vous pour un petit détail que j'aimerais remettre sur notre fiche de "collection", qu'on avait sur l'ancien modèle.

Pour vous situer, la fiche se présente comme des petites cases où on met les objets qu'on gagne dans des jeux. L'ancien code permettait de mettre le nom de l'objet qui apparaissait au survol, mais le nouveau code ne le permet plus, ce qui me rend très triste.

J'ai tenté de le reproduire en imitant l'ancien code, mais autant j'arrive très bien à faire disparaitre les choses en hover, autant en faire apparaître, ça veut pas TT

Voici donc le code de la nouvelle fiche :

Code:

<div class="fiche_presentation_suite"> <div class="block_haut"> <img src="https://i.pinimg.com/originals/94/29/2e/94292ef6beea9a61eb75a14b85ce38bd.gif" alt="icone personnage"/><!--

--> <h2>POKE GACHA <span>catch 'em all</span></h2>  </div><div id="contenu"><!--

--> <div id="onglet_suite"> <div class="infos_personnage_a"> <!--
--> <br><br> <center><img class="imgcoll" src="https://media.tenor.com/yQ6DZEGKQR0AAAAC/vulpix-alolan.gif"><img class="imgcoll" src="https://media.tenor.com/yQ6DZEGKQR0AAAAC/vulpix-alolan.gif"><img class="imgcoll" src="https://media.tenor.com/yQ6DZEGKQR0AAAAC/vulpix-alolan.gif"><img class="imgcoll" src="https://media.tenor.com/yQ6DZEGKQR0AAAAC/vulpix-alolan.gif"><img class="imgcoll" src="https://media.tenor.com/yQ6DZEGKQR0AAAAC/vulpix-alolan.gif"><img class="imgcoll" src="https://media.tenor.com/yQ6DZEGKQR0AAAAC/vulpix-alolan.gif"><img class="imgcoll" src="https://media.tenor.com/yQ6DZEGKQR0AAAAC/vulpix-alolan.gif"><img class="imgcoll" src="https://media.tenor.com/yQ6DZEGKQR0AAAAC/vulpix-alolan.gif"><img class="imgcoll" src="https://media.tenor.com/yQ6DZEGKQR0AAAAC/vulpix-alolan.gif"><img class="imgcoll" src="https://media.tenor.com/yQ6DZEGKQR0AAAAC/vulpix-alolan.gif"><img class="imgcoll" src="https://media.tenor.com/yQ6DZEGKQR0AAAAC/vulpix-alolan.gif"><img class="imgcoll" src="https://media.tenor.com/yQ6DZEGKQR0AAAAC/vulpix-alolan.gif"><img class="imgcoll" src="https://media.tenor.com/yQ6DZEGKQR0AAAAC/vulpix-alolan.gif"><img class="imgcoll" src="https://media.tenor.com/yQ6DZEGKQR0AAAAC/vulpix-alolan.gif"><img class="imgcoll" src="https://media.tenor.com/yQ6DZEGKQR0AAAAC/vulpix-alolan.gif"><img class="imgcoll" src="https://media.tenor.com/yQ6DZEGKQR0AAAAC/vulpix-alolan.gif"><img class="imgcoll" src="https://media.tenor.com/yQ6DZEGKQR0AAAAC/vulpix-alolan.gif"><img class="imgcoll" src="https://media.tenor.com/yQ6DZEGKQR0AAAAC/vulpix-alolan.gif"><img class="imgcoll" src="https://media.tenor.com/yQ6DZEGKQR0AAAAC/vulpix-alolan.gif"><img class="imgcoll" src="https://media.tenor.com/yQ6DZEGKQR0AAAAC/vulpix-alolan.gif">  </center>

</div><!--

--> <div class="image_illus ficheillu"><img src="https://media.tenor.com/NiMtDqfM0xAAAAAd/pokemon-pokemon-scarlet-and-violet.gif" alt="image d'illustration"/></div>

</div></div></div>

<style>.imgcoll {width: 50px; height:50px; object-fit:cover; border:1px solid #D4D4D490; padding: 6px;filter:grayscale(40%); border-radius:100px;}
.imgcoll:hover {opacity:0.5;}</style>

Et celui de l'ancienne fiche, pour lequel je n'ai pas accès au CSS en entier (ce qui doit probablement jouer dans mon échec total) :

Code:

</br><div id="pabcp">
<center><img src="https://i.gifer.com/JTIA.gif" style="width:400px;height:220px;margin-top:20px;"/></center>
<div style="text-align:center;text-transform:uppercase;"><sc8>POKE GACHA</sc8></div><div style="text-align:center;margin-top:-15px;"><sc5>catch 'em all</sc5></div>
<ul class="pab-bd">

<div style="overflow:scroll; height: 400px;"><li><div class="pab-rel pab-img1" style="background:url(http://placehold.it/110x110/)"><div class="pab-info"><span class="th th-heart-1"></span><n>Nom du pokemon</n></div></div></li>

<li><div class="pab-rel pab-img1" style="background:url(http://placehold.it/110x110/)"><div class="pab-info"><span class="th th-heart-1"></span><n>Nom du pokemon</n></div></div></li>

<li><div class="pab-rel pab-img1" style="background:url(http://placehold.it/110x110/)"><div class="pab-info"><span class="th th-heart-1"></span><n>Nom du pokemon</n></div></div></li>

<li><div class="pab-rel pab-img1" style="background:url(http://placehold.it/110x110/)"><div class="pab-info"><span class="th th-heart-1"></span><n>Nom du pokemon</n></div></div></li>

<li><div class="pab-rel pab-img1" style="background:url(http://placehold.it/110x110/)"><div class="pab-info"><span class="th th-heart-1"></span><n>Nom du pokemon</n></div></div></li>

<li><div class="pab-rel pab-img1" style="background:url(http://placehold.it/110x110/)"><div class="pab-info"><span class="th th-heart-1"></span><n>Nom du pokemon</n></div></div></li>

<li><div class="pab-rel pab-img1" style="background:url(http://placehold.it/110x110/)"><div class="pab-info"><span class="th th-heart-1"></span><n>Nom du pokemon</n></div></div></li>

<li><div class="pab-rel pab-img1" style="background:url(http://placehold.it/110x110/)"><div class="pab-info"><span class="th th-heart-1"></span><n>Nom du pokemon</n></div></div></li>

<li><div class="pab-rel pab-img1" style="background:url(http://placehold.it/110x110/)"><div class="pab-info"><span class="th th-heart-1"></span><n>Nom du pokemon</n></div></div></li>

<li><div class="pab-rel pab-img1" style="background:url(http://placehold.it/110x110/)"><div class="pab-info"><span class="th th-heart-1"></span><n>Nom du pokemon</n></div></div></li>

<li><div class="pab-rel pab-img1" style="background:url(http://placehold.it/110x110/)"><div class="pab-info"><span class="th th-heart-1"></span><n>Nom du pokemon</n></div></div></li>

<li><div class="pab-rel pab-img1" style="background:url(http://placehold.it/110x110/)"><div class="pab-info"><span class="th th-heart-1"></span><n>Nom du pokemon</n></div></div></li>

<li><div class="pab-rel pab-img1" style="background:url(http://placehold.it/110x110/)"><div class="pab-info"><span class="th th-heart-1"></span><n>Nom du pokemon</n></div></div></li>

<li><div class="pab-rel pab-img1" style="background:url(http://placehold.it/110x110/)"><div class="pab-info"><span class="th th-heart-1"></span><n>Nom du pokemon</n></div></div></li>

<li><div class="pab-rel pab-img1" style="background:url(http://placehold.it/110x110/)"><div class="pab-info"><span class="th th-heart-1"></span><n>Nom du pokemon</n></div></div></li>

<li><div class="pab-rel pab-img1" style="background:url(http://placehold.it/110x110/)"><div class="pab-info"><span class="th th-heart-1"></span><n>Nom du pokemon</n></div></div></li>

<li><div class="pab-rel pab-img1" style="background:url(http://placehold.it/110x110/)"><div class="pab-info"><span class="th th-heart-1"></span><n>Nom du pokemon</n></div></div></li>

<li><div class="pab-rel pab-img1" style="background:url(http://placehold.it/110x110/)"><div class="pab-info"><span class="th th-heart-1"></span><n>Nom du pokemon</n></div></div></li>

<li><div class="pab-rel pab-img1" style="background:url(http://placehold.it/110x110/)"><div class="pab-info"><span class="th th-heart-1"></span><n>Nom du pokemon</n></div></div></li>

<li><div class="pab-rel pab-img1" style="background:url(http://placehold.it/110x110/)"><div class="pab-info"><span class="th th-heart-1"></span><n>Nom du pokemon</n></div></div></li>

<li><div class="pab-rel pab-img1" style="background:url(http://placehold.it/110x110/)"><div class="pab-info"><span class="th th-heart-1"></span><n>Nom du pokemon</n></div></div></li></div>

</ul></div><a class="credshr" href="https://hyeri-code.tumblr.com/">HYE RI</a>

<style>#pabcp {--ends: #c9b6c3; --ends1: rgba(227, 217, 224, 0.5)}</style><link href="https://fonts.googleapis.com/css?family=Raleway:900i|Sarina&display=swap" rel="stylesheet"><link href="//dl.dropbox.com/s/vpi3f9s7nhpe7v7/honeybee.css" rel="stylesheet"><link href="//dl.dropbox.com/s/aptpxps3c4moun6/Ending%20Scene.css?dl=0" rel="stylesheet">

Si vous avez un tuto ou une astuce pour m'apprendre à obtenir un effet similaire, j'en serais très heureuse !
Merci d'avance

[Toryudo]

Bonjour !

Je pense qu'il n'y a qu'un seul petit problème :

Code:

<style>.imgcoll {width: 50px; height:50px; object-fit:cover; border:1px solid #D4D4D490; padding: 6px;filter:grayscale(40%); border-radius:100px;}
.imgcoll:hover {opacity:0.5;}</style>

En fait, quand vous utilisez une balise <style> directement dans un post, il ne faut aucune retour à la ligne entre le début <style> et la fin </style>. Le problème des retours à la ligne, c'est qu'ils sont remplacés par la balise <br> (retour à la ligne codé en HTML donc) dans le vrai code HTML de la page, ce qui donne techniquement ceci :

Code:

<style>.imgcoll {width: 50px; height:50px; object-fit:cover; border:1px solid #D4D4D490; padding: 6px;filter:grayscale(40%); border-radius:100px;}<br>.imgcoll:hover {opacity:0.5;}</style>

Et pour un navigateur internet, avoir un <br> qui se promène dans du CSS, ça ne lui plait pas, il a du mal à comprendre. Du coup, ce qui suit lui parait erroné, il ne s'occupe donc pas du :hover que vous avez écrit. Vous pouvez vous contenter d'enlever tous les retours à la ligne et ça devrait marcher :

Code:

<style>.imgcoll {width: 50px; height:50px; object-fit:cover; border:1px solid #D4D4D490; padding: 6px;filter:grayscale(40%); border-radius:100px;}.imgcoll:hover {opacity:0.5;}</style>

[Yunie16]

Le style est dans le panneau d'admin en vérité, je l'ai mis ici dans le même code pour rassembler, j'aurais du le préciser pardon ^^'

[Toryudo]

Au temps pour moi, j'ai été trop vite aussi... j'ai vu un problème et j'ai fait une fixette dessus...
Alors en gros, le principe, ça va être d'avoir un div "objet" par objet, un div qui va contenir à chaque fois :
- une image "objetimg"
- un texte "objettext"
L'ancienne fiche le fait très bien : on a des div qui contiennent à chaque fois l'image et le nom à afficher. C'est fait avec des background, on peut aussi le faire avec des images, un peu comme on veut tant qu'on adapte le CSS ensuite.

Exemple de structure à répéter pour chaque objet :

Code:

<div class="objet"><img class="objetimg" src="https://media.tenor.com/yQ6DZEGKQR0AAAAC/vulpix-alolan.gif"><div class="objettext">Mon objet</div></div>

On va basculer le CSS que vous aviez écrit sur vos images plutôt sur la class .objet (les tailles et le border), ajouter un peu de CSS pour les images .objetimg pour les adapter à cette structure, et ajouter du CSS sur les textes .objettext pour les positionner par-dessus l'image et les masquer de base avec un opacity 0. Ça donne ceci :

Code:

.objet {
  position: relative;
  width: 50px;
  height: 50px;
  border: 1px solid #D4D4D490;
  filter: grayscale(40%);
  border-radius: 100px;
  overflow: hidden;
}
.objetimg {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit:cover;
}
.objettext {
  position: absolute;
  margin: 6;
  opacity: 0;
}

Techniquement, le texte est par-dessus l'image, c'est ce qu'on veut.
Le dernier principe, c'est qu'une fois qu'on :hover le .objet, on doit changer la valeur de opacity de son .objettext enfant pour que l'élément ne soit plus invisible :

Code:

.objet:hover .objettext {
  opacity: 1;
}

Voilà, c'est un début ultra basique de texte qui s'affiche au survol.
Vous pouvez ajouter des éléments en plus de .objetimg et .objettext dans le .objet, vous pouvez ajouter des transitions, faire en sorte que ce ne soit pas opacity qui change mais le scale, comme sur l'ancienne fiche. Tout est possible, il faut juste bien garder cette idée de structure !

[Yunie16]

Pas de problème, je peux comprendre !

Merci beaucoup pour les astuces, j'ai déjà pu bien progresser grâce à ça !
J'ai su mettre en forme la div pour le nom de l'objet, mais y a deux petits soucis :
- l'image n'est pas centrée dans sa div et dès que j'y touche ça "casse" tout (le hover ne fonctionne plus et la bordure disparait, y a plus que l'image centrée sans animation)
- la div de nom d'objet se limite à la taille du cercle, j'ai tenté d'augmenter le width, là j'ai mis en auto pour que ça s'adapte selon le contenu, mais du coup si le texte déborde, ce qui dépasse ne s'affiche pas. J'ai mis un z-index de 99 mais ça ne change rien...

Voilà le code modifié :

Code:

.objet {
  position: relative;
  width: 50px;
  height: 50px;
  border: 1px solid #D4D4D490;
  filter: grayscale(40%);
  border-radius: 100px;
  overflow: hidden;
}
.objetimg {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit:cover;
}
.objettext {
  position: absolute;
  margin: 6;
  opacity: 0;
}
.objet:hover .objettext {
  opacity: 1;
  background:var(--couleur-secondaire);
  width:auto;
  height:auto;
  border-radius:5px;
  color:#fafafa;
  z-index:99;
  padding:3px;
  margin-top:15px;
}

+ une capture d'écran du résultat actuel :

[Toryudo]

Bonjour !

D'accord, un peu plus compliqué alors.
J'avais fait en sorte de masquer tout ce qui dépasse du cercle avec overflow: hidden sur le .objet, mais si vous voulez que le texte puisse dépasser, on va être obligé de changer un peu le principe :

Code:

.objet {
  position: relative;
  width: 52px;
  height: 52px;
  background: #D4D4D490;
  filter: grayscale(40%);
  border-radius: 100px;
}
.objetimg {
  position: absolute;
  top: 1px;
  left: 1px;
  width: 50px;
  height: 50px;
  border-radius: 100px;
}
.objettext {
  position: absolute;
  background:var(--couleur-secondaire);
  border-radius: 5px;
  color:#fafafa;
  padding: 3px;
  opacity: 0;
}
.objet:hover .objettext {
  opacity: 1;
}

Pour commencer, on ne va plus utiliser border sur .objet, mais plutôt background. Comme il y a une image par-dessus, ça ne chance pas grand-chose, c'est juste pour avoir les idées claires sur les tailles des éléments (plutôt que de devoir calculer dans sa tête la taille du cercle, qui est de 50px + 1 px de rayon = 52px). On augmente aussi ses width et height à 52px à la place de 50px pour qu'il soit plus grand que l'image .objetimg.
Ensuite, pour cette image .objetimg, on reprécise sa taille width et height à 50px, on la centre dans le cercle en appliquant un top et left à 1px et on lui met le même border radius que le cercle .objet : ça donne l'illusion d'une border, c'est ce qu'on veut.

Pour le .objettext maintenant, je déplace tout dans le .objettext plutôt que le :hover, parce que vraiment, dans notre cas, l'action du :hover ne sert qu'à changer l'opacity. Je lui ai enlevé les margin, width et height, mais vous pourrez maintenant les remettre en place avec les valeurs que vous voulez. Grâce à ces modifications, vous pouvez maintenant avoir du texte qui dépasse du cercle !

[Yunie16]

Ah oui ça explique du coup ! Je sais pas pourquoi mon cerveau n'a pas envisagé que l'overflow puisse aussi agir en horizontal, tellement l'habitude de le voir pour du contenu vertical xD

Du coup j'ai peaufiné tout ça et j'ai réussi à mettre en page comme je veux grâce à vos modifications, c'est tout beau :


Merci beaucoup pour le temps consacré à mon problème et pour m'avoir aidée encore une fois !