Forums

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

Home Forums CSS Diamond SlideUp

  • This topic is empty.
Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #166865
    qbattersby
    Participant

    Hi,

    I am looking to do this basically, I have tried a bunch of different methods, and attempted with some jQuery, can’t make it work. Help?

    I have a diamond, with a black border, rounded corners. When someone hovers, I want this diamond to fill about 80% vertically with a solid colour. On the solid colour I will drop some text (ie. description). When they move off of it the fill slides back down.

    http://codepen.io/anon/pen/BvLhC/

    Any thoughts on this?

    #166881
    paulob
    Participant

    Hi,

    This is pretty rough but did you mean something like this:

    http://www.codepen.io/paulobrien/full/Faxmo/

    Obviously instead of pseudo content you could nest another element instead with real text.

    #166952
    qbattersby
    Participant

    paulob, thank you very much, this is exactly what I was looking for. I appreciate your efforts on this, I was attempting to accomplish the same thing with a div, but with some of the rotation and transition I was getting a little mixed up.

    Thanks again!

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