28173 sujets

CSS et mise en forme, CSS3

Superposer une icone à une image en rollover

Bonjour,

Je voudrais qu'en rollOver sur une image-lien apparaisse une petite icône au dessus de l'image, qui indique visuellement que celle-ci est "cliquable". Imaginez une icône "+" pour indiquer qu'en cliquant sur l'image, on va obtenir une version agrandie par exemple.
Donc l'image reste visible, mais viendrait se superposer une icône avec le symbole "+", centrée sur l'image de fond.
J'imagine que je dois utiliser les propriétés "visibility" et "z-index" mais je ne sais comment m'y prendre.

Je pourrais évidemment utiliser la méthode des "portes coulissantes" mais j'ai beaucoup d'images et je ne souhaite pas augmenter leur poids pour ne pas alourdir mes pages.

Dois-je passer par javascript ?
Merci.
Bonjour,

En css essaye :

<style type="text/css">	
#conteneur{
	width: 400px;
	height: 400px;
	margin: auto;
	border: 1px solid black;
	
}

img{
	border: 0;
}

a{
	display: block;
	width: 100px;/* largeur image*/
	height: 157px;/*longueur image*/
	margin: auto;
	margin-top: 50px;
	background: url(image.jpg);
	position: relative;

}

a span{
	display: none;

}

a:hover span{
	display: block;
	width: 10px;/* taille croix*/
	height:10px;
	position: absolute;
	top: 73px;
	left : 45px;
	border: 0;
	text-decoration: none;	
}

</style>

</head>

<body>
<div id="conteneur">
	<a href="#" titre="" ><span><img src="croix.gif"</span></a>

</body>
Merci pour l'intervention rapide.

Oui c'est sûr, c'est une option simple et efficace...
J'aurais préféré de pas mettre mes images en "background", mais bon, je n'y vois pas non plus d'inconvénient a priori.
Merci.
Re,

Ben yaka !
#conteneur{
	width: 400px;
	height: 400px;
	margin: auto;
	border: 1px solid black;
	
}

img{
	border: 0;
}

a{
	display: block;
	margin: auto;
	position: relative;	
	width: 100px;
	height: 157px;
	margin-top: 50px;			
}

a em{
	display: block;
	width: 100px;
	height: 157px;
}

a:hover{ /* bug ie6*/
background: none;
}

a span{
	display: none;

}

a:hover span{
	display: block;
	width: 10px;
	height:10px;
	position: absolute;
	top: 73px;
	left : 45px;
	border: 0;
	text-decoration: none;	
}

</style>

</head>

<body>
<div id="conteneur">
	<a href="#" titre="" ><em><img src="image.jpg"</em><span><img src="croix.gif"</span></a>

</body>
Sujet clos
Aller à