I want to create a music player album cover with multiple layers of images that change when the user hovers over the album. One layer is the album art, another layer is the play button on top, which is greyed out until the user hovers or touches the album. Another layer would be a colored border that attaches to music albums (to differentiate them from photos, videos, etc…) and another layer would be a text block with info about the track. I’m trying to put all of these layers in the same div block and use absolute positioning and z-indexing to layer them on top of each other. The problem is that when I assign absolute positioning to an image it does not work inside the div block, but inside the container of the div blocks instead. Here is my public site so you can see what i’m trying to accomplish:
https://webflow.com/design/rykr?preview=fd4fe0369388566b385c89324ac10d79
My question is how do I accomplish what I’m trying to do, and what would be the best way to do it. Please advise if javascript of something else would be better suited to this task.
Here is a website that is doing a similar thing. Scroll down to the last dot of the right hand navigation and check out the blog section. It’s a tile based interface that has images that have a pink filter and text appear on top of them when you hover over them with the mouse, as well as other cool interactions…
Thank you very much for your time, y’all 
Sincerely,
Richard Nash
Los Angeles, CA