0

Okay, so its possible to get an image to pan to the left or the right etc with CSS3. For example:

HTML

<html>
<div> 
<img src="pic.png" class="pan">
</div
</html>

CSS

.pan:hover {
   margin-right: -50px;
}

Thats kind of how it works.

But I would like to be able to get the image to pan in the direction the mouse moves over the image. Is this possible in CSS?

Ricky
  • 763
  • 3
  • 7
  • 29
  • 2
    No, you'd need JavaScript. CSS can't tell what direction the mouse moves, only if it's over an element. – j08691 Aug 31 '16 at 19:42
  • Sugarlumps... Well off into the world of javascript it is then. Thanks, If you would like to provide an answer ill mark it – Ricky Aug 31 '16 at 19:49
  • You'll need to use Javascript, this answered question may help you http://stackoverflow.com/questions/8450199/detect-mouse-direction – Shniper Aug 31 '16 at 19:57

3 Answers3

2

No, you'd need JavaScript. CSS can't tell what direction the mouse moves, only if it's over an element.

j08691
  • 204,283
  • 31
  • 260
  • 272
2

You made me wanna try this in CSS and actually you can do some trick to make it in work in some way, but it's definitly better with js where you can detect your mouse move.

Anyway that's how I made something that pan on each side.

create one container and center all div inside it, then give it twice the width of your image. Let's say your image is 300px width and 300 height.

HTML:

<div class="container"></div>

CSS :

.container {
    display: flex;
    justify-content: center;
    width: 600px;
    height: 300px;
}

In this container put your image and put one div before and one after it.

<div class="container">
    <div class="left"></div>
    <img src="yourimage.png" alt="">
    <div class="right"></div>
</div>

The two divs must have the same height as your image and half the width of it and you must give them a relative position.

.left,
.right {
    height: 100%;
    position:relative;
    width: 150px;
}

Now we want to put those two divs on top of the image to trigger hover.

.left {
    left: 150px;
}

.right {
    right: 150px;
}

And now since they are on top of the image, we just have to add a padding (right to right and left to left) on hover to move the image.

.right:hover {
    padding-right: 50px;
}

.left:hover {
    padding-left: 50px;
}

Since the container center all divs, if one div has a padding, it move all the other div in this direction.

see fiddle: https://jsfiddle.net/L5c6xyLh/1/

Gatsbill
  • 1,760
  • 1
  • 12
  • 25
  • Changed this to the answer, it is indeed a fiddle but it works. – Ricky Aug 31 '16 at 20:39
  • it works but in a hacky way and it doesn't feel smooth in some way, if you have time, make it in js, it will be much better. – Gatsbill Aug 31 '16 at 20:40
2

With some extra markup this can be done:

html,
body {
    height: 100%;
}

.box {
    position: relative;
    height: 100vh;
    overflow: hidden;
}

.box img {
    max-width: 100%;
    transition: all .5s;
}

.left {
    position: absolute;
    z-index: 1;
    left: 0;
    top: 0;
    right: 50%;
    bottom: 0;
    background: pink;
    opacity: .3;
}

.left:hover ~ img {
    transform: translateX(-50%);
}

.right {
    position: absolute;
    z-index: 1;
    left: 50%;
    top: 0;
    right: 0;
    bottom: 0;
    background: lightgreen;
    opacity: .3;
}

.right:hover ~ img {
    transform: translateX(50%);
}
<div class="box">
    <div class="left"></div>
    <div class="right"></div>
    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/d/d1/Wikipedia_Administrator.svg/1024px-Wikipedia_Administrator.svg.png" />
</div>

Note that the target elements overlay the image and would therefore prevent clicking or selection of that element.

Fiddle

isherwood
  • 58,414
  • 16
  • 114
  • 157