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