Css et survol

Bonjour,

J'ai actuellement un problème avec un code css.

J'ai superposé deux images grâce à du css (position relative et z-index). Par dafaut, l'image du dessus n'est pas affichée. Elle apparait seulement lorsqu'on survole l'image du dessous.

Malheureusement, au survol de cette image, rien ne se passe ...

Pourriez-vous m'aider ?

Merci d'avance

Code HTML :

<article>
<img class="HoverActualite" src="img/hoverActualites.png" />
<img class="ilustrationActualite" src="img/test.jpg" alt="Actualite" />
</article>

Code CSS :

.ilustrationActualite{
    position:relative;
    z-index:0;
}
 
.HoverActualite{
    display:none;
    position:absolute;
    z-index:1;
}
 
.ilustrationActualite:hover .HoverActualite{
    display:block!important;   
}

Modifié par Fabien2 (12 Feb 2013 - 18:06)

Bonjour,

En utilisant l'image en background, c'est pas plus simple?

Un bon lien :http://kyleschaeffer.com/user-experience/pure-css-image-hover/

Bonjour.

Tu ne devrais pas avoir besoin de z-index: si une image suit une autre dans le flux du code, elle se superposera à la première si elle est positionnée sur celle-ci.

<img src="img1.jpg">
<img src="img2.jpg">

.img1 {
display: none;
}

.img1:hover {
display: block;
}

... devrait suffire.

Si je ne me trompe pas, le z-index minimal est z-index: 1 : l'objet auquel est affiché un z-index: 0 n'est pas visible.
Modifié par thierry (12 Feb 2013 - 19:27)

Effectivement tu as tout à fait raison, je me coucherai moins bête ce soir !

Malheureusement, le hover ne fonctionne toujours pas ...

}
.img1 {
text-indent:-9999999px;
position:relative;
bottom:-120px; /*hauteur de l'image*/
}
.img1:hover {
text-indent:0px;
}
.img2:hover {
cursor:pointer;
text-indent:-9999999px;
}

<div class="img1">
<img  src="IMG1.jpg">
</div>
<div class="img2">
<img src="IMG2.jpg">
</div>

Je trouve que c'est moins évident que le background...

Bonsoir,

Le lien que "rodolpheb" t'a donné (http://kyleschaeffer.com/user-experience/pure-css-image-hover/
) est tout à fait valable, mais pourquoi ne pas utiliser une "petite" ligne avec du Javascript pour obtenir l'effet désiré? Par exemple :

<img id="image" src="xxx.jpg" width="90" height="90" alt="Ce que tu veux!" onmouseover="this.src='yyy.gif'" onmouseout="this.src='xxx.jpg'" />

C'est trop simple??!

Cordialement,

Lddsoft

Je n'ai pas utilisé la technique du Javascript, puisque l'image du dessus est légèrement transparente pour pouvoir voir l'image du dessous.

Dans ce cas, autant pour moi! Mais tu ne l'avais pas dit au départ ...
Modifié par lddsoft (12 Feb 2013 - 20:54)

Effectivement j'avais oublié de le préciser
C'est aussi pour cette raison que je pense que le background n'irait pas ...

Je ne comprends pas pourquoi mon hover ne se déclenche pas ...

Y'a-t-il qqch de faux dans cette syntaxe ?

.illustrationActualite:hover + .HoverActualite{
	display:block;
}

A moins de placer au moins une image en background et en jouant sur visibility:hidden au hover pour celle qui est incluse dans le html.
Sinon je ne vois pas.

Et l'exemple que je t'ai donné (sans les background) ne fonctionne-t-il pas?
Modifié par rodolpheb (12 Feb 2013 - 22:05)

Fabien2 a écrit :
[...]
[/code]

Code CSS :

.ilustrationActualite{
    position:relative;
    z-index:0;
}
 
.HoverActualite{
    display:none;
    position:absolute;
    z-index:1;
}
 
.ilustrationActualite:hover .HoverActualite{
    display:block!important;   
}

Comme ceci, ça fonctionne...

.HoverActualite{
	display:none;
	position:absolute;
}
[b]article:hover[/b] .HoverActualite{
	display:block;
}

[b]OU[/b]

.HoverActualite{
	visibility:hidden;
	position:absolute;
}
article:hover .HoverActualite{
	visibility:visible;
}