Mouse over slider

#1

Hi,

I would like to make a slider like this:

Without clicking, just hover the mouse over the image to get the beneath image over the other one.

Who can help me? I don’t even know if u should use Javascript or something else?

0 Likes

#2

Java Script, HTML-element Canvas.

onmousemove: calculate mouse coordinates in Canvas with something like event.pageX and paint stripe.

0 Likes

#3

Looks pretty much like a standard css hover effect and you can just show another image on hover unless you have more complicated effects in mind?

https://codepen.io/paulobrien/pen/pBeKRd

You mentioned slider but I don’t see a slider as such ?

Maybe clarify your intentions a little more and then we can offer something more specific.

0 Likes

#4

Do you mean something like this? https://juxtapose.knightlab.com/

You need to drag the bar in the middle rather than it working on hover but there are a load of alternative packages listed here: https://www.cssscript.com/tag/image-comparison/ One of them might work on hover if that’s a requirement.

0 Likes

#5

Hi there lukekoppe,

and a warm welcome to these forums. :winky:

check out the attachment, to see a working example…

JavaScrip :-

sliding-mask.zip (198.4 KB)

CSS :-

css-hover-sliding-mask.zip (197.7 KB)

coothead

1 Like

#6

I did one of those in CSS a while ago also :slight_smile:

https://codepen.io/paulobrien/pen/PmwRqZ

Nice :slight_smile: (but did you forget the hover ;))

0 Likes

#7

No, I just treated it as typing error. :rofl:

coothead

1 Like

#8

…but since you drew my attention to it,
I have now popped in a CSS example…

css-hover-sliding-mask.zip (197.7 KB)

coothead

1 Like

#9

Hi there lukekoppe,

Note:-

In the CSS example this…

#slider {
    position: absolute;
    z-index: 999;
    width: 100%;
    height: 1.5em;
    top: 50%;
    transform: translate( 0, -50% );
}

…should be…

#slider {
    position: absolute;
    z-index: 999;
    height: 1.5em;
    top: 50%;
    transform: translate( 0, -50% );
}

coothead

1 Like

#10

Thank you very much!! All of you, I managed to do it because of you!

3 Likes