Streaming live at 10am (PST)

Example 5 hover reveal interaction


#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


#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.