Superposition d'images lors d'un survol

Bonjour,

J'ai plusieurs images sur lesquels j'aimerai bien superposer une image (la seconde étant transparente) de la même dimension lors du survol de celles-ci. Comment puis-je faire en CSS ou javascript ? J'ai essayé plusieurs moyens mais soit l'image de base est remplacée, soit c'est un autre problème qui survient...

HTML :

<a href="#" title="toto"><img src="img.jpg" alt="toto"></a>

CSS :

.element img {
	float:left;
	border:1px solid #ccc;
	margin:0 20px 5px 10px;
	padding:4px;

	-webkit-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.12);
	-moz-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.12);
	box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.12);

	border-radius:4px;
	-moz-border-radius:4px;
	-webkit-border-radius:4px;
}

.element img:hover {
	background-image:url('img-hover.png');
	border:1px solid #bbb;
	
	-webkit-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.2);
	-moz-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.2);
	box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.2);
}

merci pour votre aide

Salut newty,

Tu devrais utiliser des Sprites Css plus rapide à l'affichage moins de requetes serveur.

Tu as un tuto sur le site d'alsa http://www.alsacreations.com/tuto/lire/1068-sprites-css-background-position.html ou bien un ici que j'aime beaucoup.
Modifié par yellooo (26 Jul 2011 - 10:43)

Merci mais dans mon cas, ce n'est pas pour des éléments de mon template mais pour du contenu. Le nom des images sera variable (sauf pour le hover qui sera la même image), etc...

Tu vois ce que je veux dire ?
Modifié par newty (26 Jul 2011 - 13:00)

Salut, ouep je crois que j'ai compris ce que tu voulais.

regarde ce tuto et dis moi si c'est bien ce que tu veux.

Non je cherche un peu le meme genre d'effet que pour ici

En gros, lorsque je survol l'image, une autre apparait par dessus en transparence (ici fleche de lecture).

Je vois qu'il y a un span avec une image en background.

Il faut que je fasse ainsi ?

<a href="#"><img src="monimage.jpg" /><span></span></a>

Avec un span de la taille de l'image et le background image sur le hover du span ?

Salut Voici comment ils font sur ton site.

<a href="#"><span></span><img src="monimage.jpg" /></a>

a span{
opacity: 0;
width: 134px;
height: 75px;
background: url(../images/ton_image_transparente.png) no-repeat 50% 50%;
position: absolute;
top: 0;
left: 0;
cursor: pointer;
z-index: 0;
}

a:hover span{opacity: 1;} 

Il joue avec l'opacité de l'image pour la rendre visible.
Voila test et dis moi si c'est bon ou pas.

Je vais tester

je m'y approche mais ce n'est pas encore ça

<div id="elements-list">
	<div class="element">
		<a href="#" title="The title"><span></span><img src="img.jpg" alt="The title" /></a>
		<div class="info">
			<a href="">The title</a>
			<p>The text, the text,  the text, the text, the text, the text, the text, the text, the text, the text.</p>
		</div>
	</div>
	<div class="element">
		<a href="#" title="The title"><span></span><img src="img2.jpg" alt="The title" /></a>
		<div class="info">
			<a href="">The title</a>
			<p>The text, the text,  the text, the text, the text, the text, the text, the text, the text, the text.</p>
		</div>
	</div>
</div>

		.element {
			width:100%;
			padding:5px 0;
			border-bottom:1px dotted #cdcdcd;
		}
		
		.element a {
			position:relative;
		}
		
		.element a>img {
			float:left;
			border:1px solid #ccc;
			margin-right:10px;
			padding:4px;

			-webkit-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.12);
			-moz-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.12);
			box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.12);

			border-radius:4px;
			-moz-border-radius:4px;
			-webkit-border-radius:4px;
		}
		
		.element a>span {
			opacity: 0; 
			width: 150px; 
			height: 113px; 
			background: url('img-hover2.png') no-repeat 50% 50%; 
			position: absolute; 
			top: 0; 
			left: 0; 
			cursor: pointer; 
			z-index: 0;
		}
		
		.element span:hover {
			opacity: 0.6; 
		}
		
		.info p {
			margin:0;
		}

Le span est a coté de l'image même si je lui met un float:left;

avec un margin:5px 0 0 -165px; c'est bon mais je ne pense pas que ce soit une bonne solution

oki pourquoi n'utilises tu pas le top et left vu qu'il est en position absolute ?
comme ca pas besoins du margin.
As tu un exemple en ligne ?

Voilà
Modifié par newty (27 Jul 2011 - 17:38)

OK c'est bon

en fait il faut que tu ajoutes un display et mettre top a 5px

.element a { 
            position:relative ;
            display:block;
      } 
element a>span { 
            opacity: 0;  
            width: 150px;  
            height: 113px;  
            background: url('img-hover2.png') no-repeat 50% 50%;  
            position: absolute;  
            top:5px;  
            left: 5px;  
            cursor: pointer;  
            z-index: 0        } 

bonne soiree

ah super, merci yellooo