[résolu]Fusion HTML info bulle

Bonjour, je reviens demander de l'aide et surtout des conseils pour apporter une modification à mon code demandé il y a peu.


Ma demande: https://www.never-utopia.com/t60397-resolupa-demande-code-page-d-accueil-bloc-avatars


Je voudrais ajouter une info bulle qu'il s'ouvre au passage du curseur sur un logo.


J'ai bien trouvé ce tutoriel: https://www.never-utopia.com/t49280-creer-une-infobulle

L'info bulle que je souhaite est "Apparition en fondu"


Bon j'ai bien compris les modifications du CSS pour changer les apparences mais je ne sais pas comment fusionner mon code HTML actuel et le nouveau..

J'ai essayé de le faire mais c'est une catastrophe j'en rigole tout seul

Mon but est de mettre une description de la chaîne dans cette même info bulle sans toucher au logo ni aux deux descriptions en dessous.

Je veux juste que ce soit dans un cadre propre en info bulle c'est tout.

Merci d'avance

Hello

Dans le CSS il faut ajouter ceci à la fin :

Code:

/* Ajout infobulle */
.channel-infobulle {
  position: absolute;
  top: 70px; /* positionnement en haut */
  background: white; /* couleur de fond */
  padding: 5px; /* marge intérieure */
  width: 150px; /* largeur */
  left: 25px; /* positionnement à gauche */
  box-shadow: 0 0 5px black; /* ombre derriere */
  text-transform: none; /* annule les majuscules */
  visibility: hidden;
  transition: all 1s;
  opacity: 0;
}

.channel-image-wrapper:hover .channel-infobulle {
  opacity: 1;
  visibility: visible;
}

.channel-image-wrapper .channel-image {
  width: 100%;
}

.channel-image-wrapper {
  position: relative;
  width: 70%;
  margin: auto;
}
/* Fin ajout infobulle */

Et pour mettre le texte de l'infobulle, il faut remplacer :

Code:

<a class="channel-image" href="https://www.youtube.com/channel/UCmQLY0R--74aCwoBzNUAbtw" target="_blank">
      <img src="https://yt3.ggpht.com/-DuaTKlEVqj4/AAAAAAAAAAI/AAAAAAAAAAA/r8mE1VXEyEo/s100-c-k-no-rj-c0xffffff/photo.jpg" alt="Nom de la chaine">
  </a>

Par :

Code:

<div class="channel-image-wrapper">
    <a class="channel-image" href="https://www.youtube.com/channel/UCmQLY0R--74aCwoBzNUAbtw" target="_blank">
        <img src="https://yt3.ggpht.com/-DuaTKlEVqj4/AAAAAAAAAAI/AAAAAAAAAAA/r8mE1VXEyEo/s100-c-k-no-rj-c0xffffff/photo.jpg" alt="Nom de la chaine" />
    </a>
    <div class="channel-infobulle">Lorem lorem lorem</div>
</div>

Je pense que cela devrait marcher :)

Merci pour ta dispo Nihil Scar Winspeare.

J'ai placé le code c'est bon, pour lui donner l'effet "Apparition en fondu"

Code:

-webkit-transform: rotate(360deg);
transform: rotate(360deg);
visibility: hidden;
transition: all ease 1s;

Je dois l'ajouter ou?

Normalement il y a déjà l'effet "apparition en fondu"

Au passage, pour un plus bel effet, je te conseille de remplacer :

Code:

.channel-image:hover img {
  transform: scale(1.2);
}

Par

Code:

.channel-image-wrapper:hover img, .channel-image:hover img {
  transform: scale(1.2);
}

Ah... j'ai modifier mais je ne vois pas de différence au survol de l'image si?

Pour le survol des images c'est un détail

Par contre, tu as édité ton précédent message, du coup je suis un peu perdue sur l'effet que tu souhaiterais avoir ><

C'était Apparition en fondu et Apparition en rotation si possible histoire de tester les deux.

C'est bon Nihil Scar Winspeare j'ai mon effet je ne touche plus à rien.

Encore merci c'est super sympa