Discussion :

[Sollali]

Bonjour

j'ai actuellement des images qui sont aussi lien, j'aimerais que quand la souris passe sur cette image lien une autre image vienne par dessus.

En fait que l'image lien ne change pas, mais en plus une autre petite image apparaisse au centre vertical et horizontal.

J'ai vu qu'il existait différentes solutions mais je ne sais pas laquelle choisir car il y a aussi des contraintes :
actuellement j'utilise ce code pour appeler les images liens :

Le

Code CSS :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
#zoom {
  display: table;
  width: 100%;
}
#zoom > figure {
  display: table-cell;
  width: 20%;
  text-align: center;
  vertical-align: middle;
}
#zoom > figure img {
	max-width:100%;
	max-height:125px;
	padding:1px;
   display:inline-block !important;
}

et le

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
<a href="le lien">
<div id="zoom" align="center">
<figure><img src="adresse de l'image" /></figure>
<figure><img src="adresse de l'image" /></figure>
</div>
</a>

Est-ce que la nouvelle image peut être ajouté avec le CSS ?
ou alors ça se passe différemment.

Par avance, merci pour vos réponses !

[Invité]

Bonjour,

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
figure {
position:relative;
}
figure:hover:after {
position:absolute;
content:'';
top:0; left:0;
width:100%;
height:100%;
background:url('...') center center no-repeat;
}

[Sollali]

Impeccable ! Merci pour la rapidité et la qualité de la réponse.

[Sollali]

Aïe ! En fait non, ça fonctionne mais ça fonctionne aussi sur certaines images de la page.

En voici une par exemple :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

[caption id="attachment_8596" align="aligncenter" width="700"]<img class="size-full wp-image-8596" src="adresse de l'image.jpg" width="700" height="328" />[/caption]

Il n'y a ni la balise <figure> et elle n'est pas concernée par le CSS #zoom

Une possibilité pour ne pas avoir les autres images touchées par cette modification ?

[Invité]

Oui.
Etre plus spécifique dans le sélecteur.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
#zoom > figure {
...
}
#zoom > figure:hover:after {
...
}

[Sollali]

Super, ça marche et pas d'image en plus là ou il ne faut pas.
Merci.