28173 sujets

CSS et mise en forme, CSS3

[Résolu] Zoom au survol d'une image

Salut,

Je découvre le CSS depuis quelque jours et toutes les notions fondamentales ne sont pas encore acquises (quoi que j'y travaille assidument Smiley murf )...

Voilà, j'essaye d'appliquer un zoom au survol d'une image, mais ça ne donne rien (l'image est fixe en taille zoomée). 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Test Zoom</title>
<style type="text/css">
<!--
* {margin: 0; padding: 0}
html,body {height: 100%;}
div#content {
	background-color: #fff;
	height: 85%;
	background-image: url(img/logo_anime.gif);
	background-repeat: no-repeat;
	background-position: center 3px;
	overflow: auto;
}
.zoom1 {
 width: 300px;
 height: 252px;
 background-image: url(img/test_img.jpg);
 background-repeat: no-repeat;
 margin: 0 auto; 
}
.zoom1 p, .zoom1 a {
height: 252px; 
display: block;
margin:0
}
.zoom1 a: hover {
background-image: url(img/test_img.jpg);
background-position: 0 -252px;
background-repeat: no-repeat;
}
	
div#footer {
	background-color: orange;
	height: 15%
}
-->

</style>
</head>
<body>

	<div id="content">
<div class="zoom1">
<p><a href="#" title="Test zoom"></a></p>
</div>
	</div>

	<div id="footer"></div>

</body></html>


Quelqu'un pourrais me dire où je pèche ?

Merci et à+
Nicko
Modifié par nicko (28 May 2006 - 11:01)
bonjour;
je pense que ça vient de l'espace entre a: et hover dans .zoom1 a: hover
juste effacer l'espace.

.zoom1 a:hover {

background-image: url(img/test_img.jpg);
background-position: 0 -252px;
background-repeat: no-repeat;

}
Salut gege71,

effectivement, ça répond à une partie du pb, mais pas à tout...

J'ai donc fait autrement :

HTML :



<a href="#"><img src="img/test_img.jpg" width="150" height="126" alt="test"></a>


CSS :

a img {border:none}
a:hover {border:0px }
a:hover img {width:300px ; height:252px}


Source : http://batraciens.net/css-astuces/image-survol-zoom.htm

Ce n'est sûrement pas conforme aux standards CSS, mais ça a l'avantage de fonctionner...

Merci à ceux qui m'ont répondus et à ceux qui ont réfléchis à mon pb Smiley cligne

A+
Nicko
Modifié par nicko (28 May 2006 - 11:02)
Sujet clos
Aller à