Currently I have an image inside a div tag. This div tag holds an image and a container box which holds my content. I want the content to be hidden at first, and only if the content is hovered on, the content should up with an animation. Here’s a reference image of what I want to show when my card is hovered upon where the left image is the initial state of the card when the image is not hovered upon:
Currently I am able to get the content to emerge from the bottom but it starts from all the way at the bottom. I want it to start from a bit more at the top like in my reference image. I also want to change the shape of my current rectangle to look more like this.
Here is my current code:
I don’t understand what you are trying to do here. You said you wanted the content to be hidden at first and only displayed on mouse hover, so I’m not sure how it can start a bit more from the top and still be hidden? Can you clarify please.
Maybe you have done this since posting this topic, but your rectangle looks like the image to me.
So as you can see from my reference image, you only see part of the rectangle initially and all the content is hidden but when it is hovered upon, everything moves up. So far I’m able to completely hide everything including the content and the full rectangle in the initial state. So I want only a little bit from the top part to be shown
