Discussion :

[Invité]

Bonjour,

Je dois réaliser une animation d'une image au survol de la souris. J'ai écris mon code css qui fonctionne très bien sur une image dans un HTML :

Code :

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

1
2
3
4
5
6
7
img:hover{
           transform: scale(1.5);
          -webkit-transform: scale(1.5);
          -moz-transform: scale(1.5);
         -o-transform: scale(1.5);
         -ms-transform: scale(1.5);
}

Cependant quand je met mon code css dans mon svg je n'ai pas l'effet attendu. L'image s'agrandis en effet, mais avec un effet de translation alors que je ne la déplace pas dans mon code.

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
<style type="text/css">
  <![CDATA[
        image{
            -webkit-transform: scale(1);
            -moz-transform: scale(1);
            -ms-transform: scale(1);
            -o-transform: scale(1);
            transform: scale(1);
        }
        image:hover{
              transform: scale(1.5);
              -webkit-transform: scale(1.5);
              -moz-transform: scale(1.5);
              -o-transform: scale(1.5);
              -ms-transform: scale(1.5);
      ]]>
 </style>

Est-ce que quelqu'un pourrait me dire pourquoi cela ne fonctionne pas ? Ou comment je pourrais faire autrement pour avoir le même effet.

[Invité]

Problème résolu (ou plutôt contourné). J'ai utilisé animate.css pour mon animation du coup mon js donne ça :

Code javascript :

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

1
2
3
4
function fanimateImg(element){
	element.setAttribute('class', 'animated swing');
	var delay = setTimeout(function(){element.setAttribute('class','');},1000);
}

Du coup j'utilise pas :hover mais onmouseover="fanimateImg(this)" sur mes images.