How to make image move on hover with javascript?

Question

So I have a background image but no html with tags but I want to make the background image move on hove with some type of javascript. But when I add the img tag into the html it covers everything else. Here is a live example I don't know that much javascript so I'm stuck.

body { background-image: url('images/bg_2880.jpg'); }

I need the javascript to move the image on the mouse hover like this js fiddle

Whats wrong with the example you linked? Why not just plug your image url into that code? You need to create a Minimal, Complete, and Verifiable example for us to help you with your code. — cb64
– cb64, Commented Feb 14, 2019 at 22:43
When I add the image tag it covers everything on this web page getmdl.io/templates/blog/index.html — Ethical38
– Ethical38, Commented Feb 14, 2019 at 22:45

P Varga · Accepted Answer · 2019-12-02 11:28:18Z

5

This is called a parallax effect

Simple example:

addEventListener('mousemove', ev => {
  const force = 100;
  const dx = -ev.clientX / window.innerWidth * force;
  const dy = -ev.clientY / window.innerHeight * force;
  document.body.style.backgroundPositionX = dx + 'px';
  document.body.style.backgroundPositionY = dy + 'px';
});

body {
  background-image: url("http://placekitten.com/800/800");
}

edited Dec 2, 2019 at 11:28

answered Feb 14, 2019 at 22:46

P Varga

20.4k14 gold badges77 silver badges118 bronze badges

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

Collectives™ on Stack Overflow

How to make image move on hover with javascript?

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