Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS I wish I could animate from top aligned to bottom aligned.

  • This topic is empty.
Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #270696
    amidigital
    Participant

    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!

    #270700
    Paulie_D
    Member

    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.

    #270703
    amidigital
    Participant

    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.

    #270709
    Pogany
    Participant

    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.

Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.