Move image 2 when hovering image 1

Question

What I would like to do :

Moving 5px down image 2 when hovering image 1:

image1 with its reflection (image2)

I don't know code (a little CSS) but I think this one could help to do what I want, of course it's not working, could you tell me why?

jQuery(document).ready(function($){

$('.image1').on('mouseenter', function() {
$(".image2").addClass("move5px");
});
});

$('.image1').on('mouseleave', function() {
$(".image2").removeClass("move5px");
});

The class I use:

.move5px{
   top:-5px
}

Please include the relevant HTML and CSS to provide a working demonstration. — showdev
– showdev, Commented Jul 6, 2021 at 23:03

Lyser · Accepted Answer · 2021-07-07 12:41:40Z

0

ok here is the working code (#id names added):

jQuery(document).ready(function($) {
  $('#image1').on('mouseenter', function() {
    $("#image2").addClass("move5px");
  });
  $('#image1').on('mouseleave', function() {
    $("#image2").removeClass("move5px");
  });
});

And the css with a transition added for animation :

#image2 { transition: 150ms; }
.move5px{
   padding-top:5px; 
}

answered Jul 7, 2021 at 12:41

Lyser

113 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Move image 2 when hovering image 1

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related