jQuery disables css:hover class

Question

This question is kind of a duplicate, but I have read through all the other answers, but none of them were helpful. I have an image where I want to zoom in on and be able to move with the mouse. Like the banner image on this website. https://www2.hotelspro.com/.

This is the code for my image

<img src="https://via.placeholder.com/500" class="flickity-viewport">

I have a jQuery script that does the mouse movement and that works fine. Here is the code.

<script>
jQuery(document).ready(function($){

var lFollowX = 0,
lFollowY = 0,
x = 0,
y = 0,
friction = 1 / 10;

function moveBackground() {
x += (lFollowX - x) * friction;
y += (lFollowY - y) * friction;

translate = 'translate(' + x + 'px, ' + y + 'px) scale(1)';


$('.flickity-viewport').css({
'-webit-transform': translate,
'-moz-transform': translate,
'transform': translate
});

window.requestAnimationFrame(moveBackground);
}

$(window).on('mousemove click', function(e) {

var lMouseX = Math.max(-100, Math.min(100, $(window).width() / 2 - 
e.clientX));
var lMouseY = Math.max(-100, Math.min(100, $(window).height() / 2 - 
e.clientY));
lFollowX = (20 * lMouseX) / 100; // 100 : 12 = lMouxeX : lFollow
lFollowY = (10 * lMouseY) / 100;


});

moveBackground();

});
</script>

Here is the CSS that works fine on itself, but not with the jQuery

.flickity-viewport{
transition: transform .2s ease-in-out;
}

.flickity-viewport:hover{
transform: scale(1.2);
}

I have tried !important and all the answers I have found here, but nothing works. Hope someone can help me :)

This is the Codepen that explains what I am talking about. I want to scale the image by a number and be able to move it around like that. https://codepen.io/BilendM/pen/WBLmad

JasonB · Accepted Answer · 2019-06-02 14:14:44Z

1

Once your javascript has set transform on your element, the css is overridden. The reference site uses transform:scale to set the zoom on hover, and adjusts the transform-origin property based on the mouse movement.

Here's an example using much less js than your example. When the "zoom" feature is applied by transform:scale, it zooms in at the transform-origin. In this example, I am getting the current mouse position from the event passed in to the event handler, and setting the transform-origin to those coordinates. The "friction" is created using css transition timing. The zoom is still .2s but the movement is set to 1s so the image zooms quickly but repositions slowly.

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

  $('.flickity-viewport').on('mousemove', function(e) {
    $(this).css('transform-origin', e.clientX + 'px ' + e.clientY + 'px');
  });

});

.flickity-viewport {
  transition: transform .2s ease-in-out,
    transform-origin 1s ease-out;
}

.flickity-viewport:hover {
  transform: scale(1.2);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<img src="https://via.placeholder.com/200" class="flickity-viewport">

edited Jun 2, 2019 at 14:14

answered Jun 2, 2019 at 9:22

JasonB

6,4182 gold badges19 silver badges28 bronze badges

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

2 Comments

BilendM Over a year ago

Thank you so much! It works now :) But, could you please what it is doing and how you decreased my code so much?

JasonB Over a year ago

Sure, I added more explanation here.

Collectives™ on Stack Overflow

jQuery disables css:hover class

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related