animation sur carte au passage du curseur

Version imprimable

27/03/2011, 13h52
philoupe

animation sur carte au passage du curseur

Comment dois je coder en javascript pour obtenir l'effet de la carte qui s'élève quand le curseur passe sur la carte à la page suivante : http://oracledebelline.com/OracleLigneJeux.php ???
27/03/2011, 15h29
laurentg2003

Bonjour,
Je pense,que c'est un effet mousouver avec differents niveaux de z-index
les cartes sont empilées les une sur les autres avec des z-index croissants et au survol d'une carte une image plus haute est affichée
Aprés ce n'est que mon avis mais je pense qu'une telle solution doit créer le même effet !
Sinon regarde dans le code Js ;)

Bonjour,
c'est réalisable en CSS pur avec un décalage du top sur un hover.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>[...]</title>
<style type="text/css">
.carte {
  width : 50px;
  height : 100px;
  border : 1px solid #808080;
  background-color : #fefee0;
}
.carte:hover {
  margin-top : -10px;
}
</style>
</head>
<body>
<div class="carte"></div>
</body>
</html>