survol image avec zoom

Version imprimable

25/08/2010, 11h34
nagadscar

survol image avec zoom
Salut à tous !

Voilà, ce que je veux faire est très simple pour le moment, je veux juste que lorsque l'on survol une image, ca l'agrandisse (et inversement quand on sort de la zone ^^)

j'ai donc fait :

**contenu xHtml**
Code:

1 2 3 4 <div class="pic"> <img src="./pic/ibm_cell.jpg" alt="erf" /> </div>
**contenu css**
Code:

1 2 3 4 5 6 7 8 9 10 11 .pic img { width:100; height:125; } .pic img:hover { width:400; height:600; }
je suis débutant mais je ne vois pas pourquoi ce ne fonctionne pas, mon image est toujours trop grande (le css n'est apparemment pas pris en compte >_<)

bon ca doit prendre deux seconde pour des non débutant je pense mais je sais pas, j'ai juste suivi les aides et autre =/

merci d'avance !

tu rajoutes juste les propriétés transformation et/ou transition (css3 et spécifique à chaque navigateurs le supportant)

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
 
.pic img
{
    width:100;
    height:125;
    -webkit-transition: all .6s ease-in; /* element qui subit la transition, temps de la transition et function de la transition*/
    -moz-transition: all .6s ease-in;
    -o-transition: all .6s ease-in;
    transition: all .6s ease-in;
}
.pic img:hover
{
    -webkit-transform: scale(4); /*multiplication de la taille de départ x 4*/
    -moz-transform: scale(4);
    -o-transform: scale(4);
    transform: scale(4);
    -webkit-transform-origin: center center; /*origine de l'animation*/
    -moz-transform-origin: center center;
    -o-transform-origin: center center;
    transform-origin: center center;
}

25/08/2010, 11h56
nagadscar

merci pour ton aide.

Ça ne fonctionne pas, l'image reste tel quel.

J'ai vu qu'en général les balises <img /> étaient entre deux balises (soit <a> soit <p> en général), mais je ne pense pas que ça vienne de là.

Ce qui m'énerve c'est qu'hier je fais le changement de couleur pour un bouton mais que là pour image ça ne veut pas >_<

tu aurai une idée de pourquoi ça ne fonctionne pas?
25/08/2010, 12h11
ornitho13

je viens de faire le test en local et cela marche très bien, peut être est ce un héritage de '.pic' qui pose probleme.

voici un lien avec une démo que j'ai fait à partir de ton code:

http://debray.jerome.free.fr/demos/essai.html

Si tu ne vois toujours pas, envoie moi ton code ou un lien vers ton site par MP, je pourrais voir de maniere plus précise ce qui ne va pas

[EDIT] tu as oublié de mettre des px pour le width et le height, on peut les enlever uniquement quand la valeur égale 0

re, oui en effet ca marche trés bien pour ton test, et j'avais rajouté les px avant, j'avais pas vu au tout début.

Là j'ai juste tout recopié et ca ne veut pas ... je dois faire une erreur quelque part mais j'arrive pas a mettre la main dessus >_<

je te donne la totalité de mon code, tu verra peu être mieux que moi :

contenu du html :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<script src="./css/script.css" type="text/javascript"></script>
    <style type="text/css">
<!--
-->
    </style>
	</head>
	<body>    	
		<div class="pic">	
			<img src="pic/ibm_cell.jpg" alt="erf"  /> 
		</div> 
	</body>
</html>

contenu du css

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
.pic{
	margin :200px auto;
	width:300px;
	height:200px;
}
.pic img
{
    width:100px;
    height:125px;
    -webkit-transition: all .6s ease-in; /* element qui subit la transition, temps de la transition et function de la transition*/
    -moz-transition: all .6s ease-in;
    -o-transition: all .6s ease-in;
    transition: all .6s ease-in;
}
.pic img:hover
{
    -webkit-transform: scale(4); /*multiplication de la taille de départ x 4*/
    -moz-transform: scale(4);
    -o-transform: scale(4);
    transform: scale(4);
    -webkit-transform-origin: center center; /*origine de l'animation*/
    -moz-transform-origin: center center;
    -o-transform-origin: center center;
    transform-origin: center center;
}

si tu vois, c'est super, comme ça je comprendrai mon erreur >_<

[edit]

ca me dit "erreur de syntaxe à la ligne1" pour mon fichier css, ça peu peu-être t'aider ^^
et désolé de te faire **** pour un truc comme ça ...
[/edit]

25/08/2010, 12h41
ornitho13

tu utilises quel navigateur pour tester?
regarde également dans la source et/ou via firebug (ou via la console de safari ou chrome) si le fichier css ne génère pas un 404
25/08/2010, 12h45
ornitho13
Dans ta page html pour appeler le css, il faut mettre
Code:

1 2 <link rel="stylesheet" href="./css/script.css" type="text/css" />
et pas

Code:

<script src="./css/script.css" type="text/javascript"></script>

ça c'est pour le javascript
25/08/2010, 12h51
nagadscar

rha mais je suis trop bête ! les erreurs à la ***

je commence le html/css depuis hier donc j'ai encore un peu de mal, mais vu que ça m'a bien fait galérer, je le saurai dorénavant ^^

merci pour ta patience (là il en fallait vraiment) !

bne journée et encore merci !

Cdlt,

naga