make a (image) move to the right and rotate 45 degrees while hovering over another (image)

Question

I want to hover over an image (music album) and then a record rolls out, so I want it to move to the right and to rotate a bit, and when its offhover i like it to return to normal also with an animation. It can already move to the right but I can't get it to rotate with it. I like to keep it as simple as possible as I am not a pro in coding. I am using javascript for the movement part as below,

$(document).ready(function (){
     $("#cover1").hover( function() {
         $("#coverrecord1").stop().animate({ left: '5%' }); 
         }, function() { 
         $("#coverrecord1").stop().animate({ left: '0' }); 
      } ); 
})

You can find the solution here : http://stackoverflow.com/questions/23695090/spin-or-rotate-an-image-on-hover — jean-max, Dec 08 '16 at 12:35
'I am using javascript for the movement part' -> Can you post that " javascript part" in the question? — Sudhansu Choudhary, Dec 08 '16 at 12:36
$(document).ready(function (){ $("#cover1").hover( function() { $("#coverrecord1").stop().animate({ left: '5%' }); }, function() { $("#coverrecord1").stop().animate({ left: '0' }); } ); }); — kevinS, Dec 08 '16 at 12:37
can you make one where you hover over a different image and make the other image turn? — kevinS, Dec 08 '16 at 12:42

score 1 · Accepted Answer · answered Dec 08 '16 at 13:09

can you test this jsfiddle and let me know this is what you are looking for

$("#albumContainer>img").hover(function(){
    $("#albumContainer>img").each(function(){
    $(this).addClass("animate");
  });
  $(this).removeClass("animate");
});

$("#albumContainer>img").mouseout(function(){
    $("#albumContainer>img").each(function(){
   $(this).removeClass("animate");
  });
 });

score 0 · Answer 2 · edited May 23 '17 at 12:00

Okay, what you're looking for is the CSS3 transform property.

BUT - it does not work with regular jQuery animation.

So you have a couple of options:

write your own function with step (good example: Animate element transform rotate)
use CSS3 animation with a class

something like this:

$("#cover1").hover( function() {
     $("#coverrecord1").addClass('rollOut'); 
     }, function() { 
     $("#coverrecord1").removeClass('rollOut'); 
  } ); 

<style>
   #coverrecord1{ transition:all 1s;}
   .rollOut{
      left: 5%;
      -ms-transform: rotate(45deg); /* IE 9 */
      -webkit-transform: rotate(45deg); /* Chrome, Safari, Opera */
       transform: rotate(45deg);
    }
</style>

for more on CSS3 animation: http://www.w3schools.com/css/css3_animations.asp and a whole lot of google results

score 0 · Answer 3 · answered Dec 08 '16 at 13:12

Instead of doing the animation with JavaScript I'd recommend it to do it with CSS. You could simply achieve your desired effect with the following code.

The example is just to give you an idea of how it could look like. Of course from this point you can even fine tune your animation .

HTML

<div class="album">
  <img class="cover" src="path" alt="" />
  <img class="record" src="path" alt=""  />
</div>

CSS

.album {
  position: relative;
  width: 200px;
  height: 200px;
  background: #eee;
  cursor: pointer;
}

.cover {
  position: relative;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 100;
}

.record {
  position: absolute;
  top: 50%;
  left: 0;
  height: 100%;
  transform: translateY(-50%) rotate(0deg);
  transition: 0.3s;
}

.album:hover .record {
  left: 50%;
  transform: translateY(-50%) rotate(45deg);
}

.album {
  position: relative;
  width: 200px;
  height: 200px;
  background: #eee;
  cursor: pointer;
}
.cover {
  position: relative;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 100;
}
.record {
  position: absolute;
  top: 50%;
  left: 0;
  height: 100%;
  transform: translateY(-50%) rotate(0deg);
  transition: 0.3s;
}
.album:hover .record {
  left: 50%;
  transform: translateY(-50%) rotate(45deg);
}

<div class="album">
  <img class="cover" src="http://www.fuse.tv/image/56fe73a1e05e186b2000009b/768/512/the-boxer-rebellion-ocean-by-ocean-album-cover-full-size.jpg" alt="" />
  <img class="record" src="http://www.clipartkid.com/images/853/vinyl-record-1-1024-768-descibel-radio-1TJlqv-clipart.png" alt="" />
</div>

score 0 · Answer 4 · answered Dec 08 '16 at 13:14

Try with below tag

<img src="http://i.imgur.com/3DWAbmN.jpg" />
<img src="http://i.imgur.com/3DWAbmN.jpg" />

and add below css

img{
    border-radius:50%;    
    -webkit-transition: -webkit-transform .8s ease-in-out;
    -ms-transition: -ms-transform .8s ease-in-out;
    transition: transform .8s ease-in-out;


}
img:hover{
    transform:rotate(45deg);
    -ms-transform:rotate(45deg);
    -webkit-transform:rotate(45deg);
}

make a (image) move to the right and rotate 45 degrees while hovering over another (image)

4 Answers4