How to create hover overlay on image animation?

Answered Victor Conesa ● 8 years ago

I'm trying to create the following effect:

When I hover over the image with the cursor, it moves up, while darkening and showing text. When I hover off, it goes back to its default state.

I've tried the following:

1) What I've done is create a rectangle which is hidden, and set events to mouseover move for both the rectangle and the image, as well as show the rectangle (set to 50% transparency), using easing for all.

-- The problem is that the rectangle has to be over the image, in order to activate the hover state. Yet the hover state is set on the image, so the mouseover event for the rectangle takes over rather than the original mouseover state for the image, then it goes into a cycle.

2) I put the rectangle under the image, and set to full transparency. The events are the same as above, but instead of showing the rectangle, I set the event to change the style of the image, which would set transparency to 50%.

-- The problem here is there is no animation for the change of style. (which should really be a feature!) Also, text still has to go over the image, and if I hover on text, then it'll cancel the hover effect. Is there any event pass through, so it triggers the layer below?

Any proper solution to this?