Streaming live at 10am (PST)

Example 5 hover reveal interaction


Hi Everyone

Im trying to duplicate this same interaction show on this page -

Example #5

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

Main Album Image
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?


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


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


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


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