how to rotate image when hover another div?

Question

CODE HTML :

<div class="images-rotate">
 <a href="link login">
   <img class="rotate" src="http://localhost/design/images/h_login.png" width="100px" /> 
 </a>
</div>


<div class="ABC">
 <p>
  HELLO WORLD !
 </p>
</div>

CODE CSS :

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

With this code, when i hover IMAGE class "rotate", it will rotate 360deg.

But now i want : when user hover div class "ABC", IMAGE will auto rotate 360deg.

How to do it ? Someone can help me. Thank you very much !

look here : http://stackoverflow.com/questions/6910049/on-a-css-hover-event-can-i-change-another-divs-styling — kobigurk, Jun 25 '13 at 10:44

Dan Ovidiu Boncut · Answer 1 · 2013-11-13T14:01:01.323

2

Put hover effect in a class hovered and use this jQuery code:

 $(".ABC").on('hover',function() {
           $("img").toggleClass("hovered");
        });

Here is a working example.

Update: http://jsfiddle.net/KT3gL/2/

edited Nov 13 '13 at 14:01

answered Jun 25 '13 at 10:45

Dan Ovidiu Boncut

3,083
4
25
45

Can you help me step by step ! Thank – user2519516 Jun 25 '13 at 10:50
Now when i hover "Hello world" image rotate, BUT when i hover image it cannot rotate. How to fix it ? Thank ! – user2519516 Jun 25 '13 at 10:59
i updated my answer. please consider accepting my answer if everything is ok for you :) – Dan Ovidiu Boncut Jun 25 '13 at 11:11
thank, i add css : .rotate:hover { -webkit-transform:rotate(360deg); -moz-transform:rotate(360deg); -o-transform:rotate(360deg); } and it can rotate when i hover images or div class ABC. Can you give me your contact: facebook or gmail... thank ? – user2519516 Jun 25 '13 at 11:18
now i am studying web design, I see you are fluent in jquery... you can help me something about jquery in future. Sorry if it make you mind! – user2519516 Jun 25 '13 at 11:28
have something wrong, i added that code into website. when i hover div class ABC, all img rotate, i want only img in div class "image-rotate" rotate. Can you help me how to do that ! – user2519516 Jun 25 '13 at 12:43
change with $("div.image-rotate img").toggleClass("hovered"); If u want to learn how to use jQuery I suggest you to study the jQuery module from http://www.codecademy.com/ – Dan Ovidiu Boncut Jun 27 '13 at 06:59

score 0 · Answer 2 · answered Jun 25 '13 at 11:03

try this :

http://jsfiddle.net/KzFL4/5/

CSS :

.ABC p{
-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;
    cursor:pointer;
   overflow:hidden;
 } 

.ABC p:hover 
{
-webkit-transform:rotate(360deg); 
-moz-transform:rotate(360deg);
-o-transform:rotate(360deg);
}

how to rotate image when hover another div?

2 Answers2