Partage

Faire disparaitre une image au survol

10 octobre 2017 à 23:00:31

Bonjour,

J'aimerais faire en sorte que lorsque l'on survole une image, elle disparaît de manière à ce qu'un bouton apparaîte et que lorsqu'on clique dessus, on est redirigé vers une page (<a href="" .....>).

J'ai donc fais ce code :

Code HTML:

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<link rel="stylesheet" type="text/css" href="./l.css">
	<title>Animation</title>
</head>


<body>

 <div id="cf">
  <a href="https://youtube.com"><img class="image_qui_ne_disparait_pas" src="https://i.imgur.com/jnS2w82.png" /></a>
  <img class="image_qui_disparait" src="https://i.imgur.com/rWQJaKg.png" />
</div> 


</body>
</html>


Code CSS:

#cf {
  position:relative;
  height:281px;
  width:450px;
  margin:0 auto;
}

#cf img {
  position:absolute;
  transition: opacity 1s ease-in-out;
}

#cf img.image_qui_disparait:hover {
  opacity:0;
}

#cf img.image_qui_ne_disparait_pas{
  height:281px;
  width:450px;
} 

img.image_qui_disparait{
  width: 450px;
  height: 280px;
}

Le soucis est que lorsque l'image apparaît, je ne peux pas cliquer dessus étant donné que j'ai mis "opacity:0;" ce qui défini la transparence et ne fait pas en sorte que l'image disparaisse mais j'aimerais pouvoir cliquer sur l'image (l’image de la classe img_qui_ne_disparait_pas)

Merci et bonne journée/soirée !

-
Edité par AywokenWoken 11 octobre 2017 à 9:18:15

11 octobre 2017 à 9:20:56

A mon avis c'est plus le position absolute qui te poses un souci, je vais tester de mon côté. ;)

-
Edité par Mewen_bzh 11 octobre 2017 à 9:22:09

11 octobre 2017 à 9:55:26

Mewen_bzh a écrit:

A mon avis c'est plus le position absolute qui te poses un souci, je vais tester de mon côté. ;)

-
Edité par Mewen_bzh il y a 28 minutes


Oui mais dans ce cas, je fais comment pour mettre les images au même endroit ? 

Devrai-je utiliser flexbox ?

11 octobre 2017 à 10:02:15

Hello,

Rien à voir avec absolute pour moi. Essaie avec du JS, tu interagis sur ton container en hover, tu fais disparaitre ta première image, et tu la décales en même temps (avec un overflow:hidden; sur ton container pour pas que ce soit dégueu). Et voilà ;)

11 octobre 2017 à 10:09:46

MrChampy a écrit:

Hello,

Rien à voir avec absolute pour moi. Essaie avec du JS, tu interagis sur ton container en hover, tu fais disparaitre ta première image, et tu la décales en même temps (avec un overflow:hidden; sur ton container pour pas que ce soit dégueu). Et voilà ;)


Pas bête, je vais essayé !

Pour vous donner une idée de ce que je veux faire, tenez : https://imgur.com/PFDl2dy

11 octobre 2017 à 11:25:00

Bonjour,

Si j'ai bien compris, possible en css avec l'image en background et en jouant sur les z-index :

HTML :

<div class="element">
  <a href="page.html" class="lien">lien</a>
</div>

CSS:

.element {
  width:200px;
  height:300px;
  background-image:url(img/image.jpg);	
}
.element:hover {
  background-image:none;
}
.lien {
  position:relative;
  z-index:-100;
}
.element:hover .lien{
  z-index:100;
}





Faire disparaitre une image au survol

× Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
  • Editeur
  • Markdown