Show image below div on Hover

Asked

Viewed 167 times

0

Good afternoon,

I need to build an effect on a blog where when you hover over the pink div, it shows an image that’s at the bottom of it. But I need to show this image only in the area where the lock is.

The layout is this one. The part I need the image to appear is only in the top pink box.

layout

Basically, the lock icon would follow the cursor, and as the mouse moves, it will show the image.

Could help me with references or a north of how to do?

I think you can do this with jquery or canvas, maybe even with a little css and js.

The whole structure is already assembled, I just really need to do this.

Thank you.

javascript jquery css

  • It’s like a "slushee"?

  • puts your code man

  • That andrepaulo, more or less that

  • I’ll be editing, Magichat

  • The difference is that the scratch card occurs at the click and "erases" the box that is on top. In that case I just want to show the contents in the lock area

  • puts the code of your "cursor" (lock) for us.

  • Code http://codepen.io/leoamrl/pen/KWVmvZ

  • I was researching here man, I think maybe with the property clip-path css to do, but in IE it doesn’t work, for example. :(

  • I was able to do it, I changed it. Call: http://lancamentos.euroamericaconstrutora.com.br/papodecasa/

  • put the answer there for us to see and stay for the next people with the same doubt, You can answer your own question!

Show 5 more comments

1 answer

0


  • Speaks Leo Amaral, edits your answer by putting the code that Voce used, I was very curious to know how Voce did.

Browser other questions tagged javascript jquery css

You are not signed in. Login or sign up in order to post.