Hover box transition animation

HTML & CSS
,
#1

I’m trying to create a box with an image filling the box and a headline centered both horizontally and vertically. On hover I would like the opacity of the image to lower (revealing a darker background) and a paragraph of text to slider up.

I’m pretty close, but not sure how to handle sliding the text up.

here is a code pen I started and it has a before and on hover example showing what I’m trying to do:

#2

This is a bit rough but maybe something like this?

2 Likes
#3

Darn, Paul beat me to it. I did it slightly different (moved the img to the background, and removed some of the extraneous markup. The header jumps, which I can’t figure out how to fix, but with the background, and the content sliding up, it doesn’t seem to frightful

2 Likes
#4

Good work Dave :slight_smile:

Yes I ended up absolutely placing it to avoid that.:slight_smile:

A better solution may be to include another header in the sliding content and hide the original.

2 Likes
#5

thanks Paul & Dave!!! I really appreciate the help you guys provide.

1 Like
#7

I smoothed it out a little without changing html.

2 Likes
#8

Experimenting with a different approach using transition on grid-rows. So heading paragraph 100% 100% → 15% 85%

Seems to work

2 Likes