Example 5 hover reveal interaction

Design help Animations & Interactions
1

Hi Everyone

Im trying to duplicate this same interaction show on this page - https://interactions.webflow.com/

Example #5

The trouble im having is the laying out of the actual elements.

Main Album Image
Gradient
Bottom Black Box
3 Icons

Should this all be done in div’s. Im not really sure how to go about this. Can someone give some guidance?

Tom

Here is my public share link: LINK
(how to access public share link)

2

Hello @Tom_Caliendo
Hum the way I would have done this.

The main album image, div with background image fix width and height, relative

The overlay, div 100% width and height, absolute z index 10

The bottom overlay, div 100% width, height fix, absolute z index 15

The 3 icons in a 3 column, row 100% width absolute z index 15, bottom margin ‘bottom overlay’ height plus 20 pixel

1 Like
3

The way to go is to design it the way it looks when the interaction has been done. So basivally we need 3 elements:

  • the album object itself
  • the overlay with action that fades in
  • the overlay title that slides up in

Structure would be:

div for the album cover with the cover as background image -- div for the small text on the top of cover -- div for the overlay, lets call it *.overlaydiv* ---- div for the container of icons ------ icon 1 link block -------- icon 1 ------- icon 2 link block -------- icon 2 ------ icon 3 link block -------- icon 3 ---- div for the sliding title let's call it *.slidingtitle* ------ the title (text element)

Now your interaction will have 2 hover triggers and will be set on the upper div (album). It will do this:

  • on hover, affects overlaydiv (and limit to nested) and bring it to 100% opacity
  • on hover, affects slidingtitle (and limit to nested) and slide it + opactity 100
4

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.