Faire totalement disparaitre une image au survol

a marqué ce sujet comme résolu.

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:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
<!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:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
#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 !

+0 -0

Et si tu changeais plutôt le background de ton lien ?

Si tes images n’ont pas de rôle réel, autant les utiliser correctement : pour décorer.

Ainsi ton lien ne bougerait pas, seul son style changerait.

Par contre pense à pré-charger les deux images (ou mieux, les regrouper en une seule) pour éviter les problèmes liés au réseau.

viki53

Je pense que je me suis mal exprimer :p

Enfait, j’aimerais faire une section "Derniers Articles" avec dedans des images qui lorsqu’on les survole, une nouvelle image apparaît et que lorsqu’on clique sur l’image apparue, celle-ci nous redirige vers un lien.

C’est plus clair ? :p

+0 -0
Connectez-vous pour pouvoir poster un message.
Connexion

Pas encore membre ?

Créez un compte en une minute pour profiter pleinement de toutes les fonctionnalités de Zeste de Savoir. Ici, tout est gratuit et sans publicité.
Créer un compte