Div Content on Rollover

Well, main steps are:

  1. create div, give it position relative, overflow: hidden
  2. put image inside the div OR give that 1st div background image
  3. if you put image, give it position: absolute, aligning: full, height =100%
  4. add 2nd div inside the 1st one (inside that div should be text that you want to show)
  5. give it position:absolute and z-index higher than image
  6. align it 100% down from the bottom
  7. apply interaction on 1st div:
    • trigger: hover
    • affect different element: “2nd div class”
    • hover over: move up 100%
    • hover out: move to origin

Hope it helps,
Anna

1 Like