Mouse over slider

HTML & CSS
1

Hi,

I would like to make a slider like this:

slider1
slider11209×538 187 KB

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?

2

Java Script, HTML-element Canvas.

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

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?

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.

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.

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:

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

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
11

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.