survol image avec zoom

**nagadscar** · 25/08/2010, 11h34

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
 
<div class="pic">	
	<img src="./pic/ibm_cell.jpg" alt="erf"  />
</div>

**contenu css**

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 !

**ornitho13** · 25/08/2010, 11h50

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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;
}

**nagadscar** · 25/08/2010, 11h56

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?

**ornitho13** · 25/08/2010, 12h11

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

**nagadscar** · 25/08/2010, 12h38

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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]

**ornitho13** · 25/08/2010, 12h41

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

**ornitho13** · 25/08/2010, 12h45

Dans ta page html pour appeler le css, il faut mettre

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

et pas

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

ça c'est pour le javascript

**nagadscar** · 25/08/2010, 12h51

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

survol image avec zoom [CSS 3]

Survol d'un élément en CSS (:hover)

Discussions similaires

Partager

Partager