I wish I could animate from top aligned to bottom aligned.

[amidigital]

I’m trying to animate this paragraph like you see below.

The tricky part is there will be lots of these modules for different brands. And they will have different size paragraphs.

Any ideas how to animato to a bottom aligned paragraph?

https://codepen.io/AmIDigital/pen/QrqJER?editors=1100

Thanks!

[Paulie_D]

Because you have known heights for elements you can interplay margin-top and transform:translateY to achieve something close to what you are after.

I’d also suggest moving the hover trigger to the wrapper and not the p as it will solve some minor hover/not-hover issues.

https://codepen.io/Paulie-D/pen/wjrOMQ?editors=0100

Finally, center is an obsolete element and should not longer be used.

[amidigital]

Problem is I don’t know the height of the paragraph element. Meaning there will be lots of these modules with varying amounts of content in each paragraph.

[Pogany]

Hi,
In this case you will need to use JavaScript to calculate the value for the top.
I’m using map to iterate all the p elements inside a fashion box.
I’ve made a fork of your pen, y hope it helps:
https://codepen.io/giaco/pen/vjWKJR?editors=0111

And by the way: that center tag has been deprecated long time ago.
I’ve also removed the image with the script from one fashionBox since the script acts very funny.

[Author]

Posts