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:
This is a bit rough but maybe something like this?
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
Good work Dave
Yes I ended up absolutely placing it to avoid that.
A better solution may be to include another header in the sliding content and hide the original.
thanks Paul & Dave!!! I really appreciate the help you guys provide.
I smoothed it out a little without changing html.
Experimenting with a different approach using transition on grid-rows. So heading paragraph 100% 100% → 15% 85%
Seems to work
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.