Afficher un picto lors d'un hoverRésolu/Fermé

Question

Bonjour, J'aimerais afficher un lien (picto) lors d'un hover. Seulement voilà... ce que j'ai trouvé sur le net ne fonctionne pas. Si une personne pouvais m'aider ;)`Mes CSS : .dmitri { position: relative; width: 50%; height: auto; float: right; margin-left: 20px; margin-top: 40px;}.dmitri:hover { opacity: 0.7; background-image: url('/imgs/link_icon_145967.png'); background-repeat: no-repeat; display: block;} et mon simple HTML :

Merci et bonne journée !Configuration: Macintosh / Chrome 101.0.4951.41

Pitet · Answer

Bonjour, Tu peux essayer comme ceci : .modal { position: relative; display: inline-block; } .image-hover { position: absolute; top: 0; left: 0; opacity: 0; } .modal:hover .image-hover { opacity: 0.7; }

lamontange · Answer

Bonjour Pitet,
Il doit y avoir un problème dont je n'ai trouvé la cause au niveau du HTML. L'image (dmitri) n'apparaît plus :/
Merci pour ton aide (encore une fois ;)
LM

lamontange · Answer

L'inspecteur et moi :( Alors le code :) .prez{ display: block; text-align: center; margin-bottom : 20px; color: black; border-radius: 0px;}.oModal { position: fixed; z-index: 99999; top: 0; right: 0; bottom: 0; left: 0; background: rgba(0, 0, 0, 0.8); opacity:0; -webkit-transition: opacity 400ms ease-in; -moz-transition: opacity 400ms ease-in; transition: opacity 400ms ease-in; pointer-events: none; overflow-y: auto;}.oModal:target { opacity:1; pointer-events: auto;}.oModal:target > div { margin:5% auto; transition: all 0.4s ease-in-out; -moz-transition: all 0.4s ease-in-out; -webkit-transition: all 0.4s ease-in-out;}.oModal > div { max-width: 60%; position: relative; margin: 1% auto; padding: 8px 8px 8px 8px; border-radius: 5px; background: white; transition: all 0.4s ease-in-out; -moz-transition: all 0.4s ease-in-out; -webkit-transition: all 0.4s ease-in-out; overflow-y: auto;}.oModal > div h2 { margin:0;} Le HTML :

MERCIIIIIIIIII !

lamontange · Answer

Ca vaut le coup d'apprendre à utiliser l'inspecteur, c'est très pratique pour le développement en html et css. Je sais, je vais m'y mettre ;) Ton code semble très différent du code de ton premier message et de la solution proposée. Il y avait les CSS des images, puis de la modale. Mon ctuel (paske j'y arrive pas :/ HTML : Ma photo de profil

et les CSS : .dmitri { position: relative; width: 50%; height: auto; float: right; margin-left: 20px; margin-top: 40px;}.dmitri-hover { position: absolute; top: 0; left: 0; opacity: 0; transition: opacity 400ms ease-in;} photo_cv, c'est autre chose, désolé. L'image clickable (celle dont je désire un picto lors du :hover) c'est dmitri Encore merci et désolé.

lamontange · Answer

Merci pour toutes ces explications, ça m'aide à comprendre.
Par contre, je n'ai pas d'image. Uniquement les intitulés. Donc le hover fonctionne :)
Merci !

lamontange · Answer

Merci beaucoup Pitet !!!! Je me posais la question d'où venait le problème...
Pas vu :/( J'ai virer les slash des chemins et ÇA ROULE !!!!!!! :))))))
Encore MERCI !!!!

lamontange · Answer

Par contre, le B.A.BA... :/
Comment je fais pour que le picto reste centré sur l'image, et pour réduire ce dernier ?
Un backrgound-size ne fonctionne pas. :(
Désolé.

lamontange · Answer

Suis-je aussi idiot ?
Apparemment ;) tout fonctionne :)

lamontange · Answer

Par contre, je ne trouve pas comment changer l'opacité de la photo dmitri, celle qui déclenche le picto au :hover :/
.bloc-dmitri {
  position: relative;
  width: 50%;
  float: right;
  margin-left: 20px;
  margin-top: 40px;
}

.dmitri {
  width: 100%;
  height: auto;
}

.dmitri-hover {
  position: absolute;
  padding-top: 100%%;
  width: 50%;
  height: 50%x;
  left: 30%;
  opacity: 0;
  transition: opacity 0.4s ease-in;
}

.bloc-dmitri:hover .dmitri-hover {
  opacity: 0.2;
}

lamontange · Answer

Bonjour Pitet,
J'ai ce message d'erreur. Peux-tu m'aider stp ?
Merci et bon week-end,
LM

lamontange · Answer

</a>...^^

Afficher un picto lors d'un hover

11 réponses

Discussions similaires

Newsletters