title: how to rotate image when hover another div?
body: <p>CODE HTML :</p>
  
  <pre><code>&lt;div class="images-rotate"&gt;
   &lt;a href="link login"&gt;
     &lt;img class="rotate" src="http://localhost/design/images/h_login.png" width="100px" /&gt; 
   &lt;/a&gt;
  &lt;/div&gt;
  
  
  &lt;div class="ABC"&gt;
   &lt;p&gt;
    HELLO WORLD !
   &lt;/p&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CODE CSS : </p>
  
  <pre><code>.rotate{
  -webkit-transition-duration: 0.8s; 
  -moz-transition-duration: 0.8s;
  -o-transition-duration: 0.8s;
  transition-duration: 0.8s;
  
  -webkit-transition-property: -webkit-transform; 
  -moz-transition-property: -moz-transform;
  -o-transition-property: -o-transform;
  transition-property: transform;
  
  overflow:hidden;
  
  } 
  
  .rotate:hover 
  {
  -webkit-transform:rotate(360deg); 
  -moz-transform:rotate(360deg);
  -o-transform:rotate(360deg);
  } 
  </code></pre>
  
  <p>With this code, when i hover IMAGE class "rotate", it will rotate 360deg.</p>
  
  <p>But now i want : when user hover div class "ABC", IMAGE will auto rotate 360deg.</p>
  
  <p>How to do it ?
  Someone can help me.
  Thank you very much !</p>