28172 sujets

CSS et mise en forme, CSS3

Bonjour,
J'essaie actuellement de faire apparaître au survol une image via css par dessus une image html <img src...>
Je suis en train de m'arracher les cheveux (ce qu'il en reste), j'imagine que ce n'est pas si compliqué que ça.
J'ai entendu parler de z-index mais je n'ai pas encore totalement compris son fonctionnement.

<div class="image"><a href="#"><img src="./img.jpg></a></div>
[code=html]

Lorsque que je survol cet élément, je voudrait faire apparaître un png par dessus (avec une corbeille pour qu'on comprenne que quand on clique sur l'image, on la supprime)

contraintes :
Je ne peux pas faire de background position car l'image doit être en dur dans le code.(et la corbeille dans le css)

J'espère être assez clair...
Merci d'avance
Modifié par mchev (13 Sep 2011 - 19:24)
Oups et bien je viens de trouver voici donc la solution :

<div class="photos"><a href="#"><img src="./img.jpg></a></div>


.photos {
	display:inline-block;
	height: 100px;
	margin-left:5px;
	margin-bottom:5px;
	background-image:url(delImg.png);
	background-repeat:no-repeat;
	background-position:center;
}
.photos img {
	height:100px;
}
.photos img:hover {
	-moz-opacity:0.5;
	opacity: 0.5;
	filter:alpha(opacity=50);
}


Désolé pour le dérangement Smiley cligne