Reveal image on hover

HTML & CSS
1

Hello!

I am trying to make an effect, where the background - image will be revealed, as I hover over it.
The problem is that I want to make it for a specific area, not the full view port.
The background-image of an absolute item, with background fixed, it is taking the whole screen automatically. So I am trying to limit it inside a specific div.
All the effect to be happening for a specific div.

Having tried many things but cannot make it working.

Here is an example that I am following: https://codepen.io/suez/pen/PwKZwO

I am not sure if it’s the best way, or there are any alternatives.

Thank you for any help!

2

if (e.pageX < some number || e.pageX > some other number || e.pageY < some number || e.pageY > some other number) { return; }
?

1 Like
3

If I understand correctly I think you can just hide the overflow on a div using css only which should give the effect you want…

I may have misunderstood though :slight_smile:

3 Likes
4

Oh yes it’s that simple :slight_smile:

But it needs the whole image to cover this box. So I guess I could fix this with background-position then?

5

I’m not quite sure what you mean?

Do you want a black box that shows the whole image on hover? If so you don’t need any JS at all for that.

e.g.

However, I think you mean something more complicated than that.

6

Yes :slight_smile:

The box should contain the image, but it will reveal only the part that I am hovering, is this more clear?

In the your first code this was happening, but the full image was not in the box, it was part of the image there. As it was stretching across all the browser width, but we just seeing the part inside the div.

7

Ah ok, I think you mean something like this:)

Edit:

Actually I think that only works when centred in the window. Let me think about this for a minute:)

8

Ok If I’m understanding that you want a whole image in the div then you can’t use the background-attachment fixed trick because fixed backgrounds are always in relation to the viewport. The circle showing the image relies on the same mechanism to show the relevant part of the image.

If you want a background image to fill the box then you need a normal background image but you would then need to calculate the offsets of the image in order to display the right part of the image in the circle. This could get very messy and need a lot of background-position manipulating.

I’m sure one of the JS gurus watching here could do that for you but a css solution may be easier depending on your use case. Rather than showing an image in the circle lets instead rub everything out that is outside the circle using box-shadow and then we don’t need to have anything at all in the circle as you will see the background underneath.

Here’s a proof of concept.

2 Likes
9

Here’s a version using JS to determine the background-position of the circle rather than the rubbing out method I mentioned above.

I think the css version is a tiny bit smoother because it doesn’t manipulate the background-position as such and won’t need to redraw.

2 Likes
10

The solution with the box-shadow is awesome :slight_smile: great thought.

One thing that I am trying, is that when the cursor moves outside of the div, the circle will follow - hide / fade-out in some way, because now it is stuck there.

11

It should be easy enough to make the circle go all the way out of the box so you can’t see it.

If you wanted it to fade out when it touched an edge (or passed through an edge ) would be a lot more complicated as you’d have to track the positions and then apply a fade class to the element.

I’ll have a look tomorrow unless someone else jumps in first :slight_smile:

1 Like
13

You could use css just to show the circle when hovering which will mean it will hide when not hovered.

e.g.

That’s a proof of concept I will need to refine it later :slight_smile:

2 Likes
14

Yes that’s good.

I am not sure why the circle in not centered

15

Yes that’s what I alluded to :slight_smile:

I’m on a mobile at the moment so can’t change the code but it’s because the circle has no width or height to start with. You could hardcode the JS value at the required width or perhaps better to leave the circle at its original size and transition the background of the circle from black to transparent.

I’ll be back in a couple of hours :slight_smile:

1 Like
16

I’ve changed it to a fade instead and works fine now :slight_smile:

3 Likes
17

Ok I will check this one, it looks great!

1 Like
18

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