Streaming live at 10am (PST)

Does absolute positioning work inside of blocks? or just inside of containers?

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:

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 :slight_smile:


Richard Nash
Los Angeles, CA

Quick tutorial on positioning.

Used your images, don’t be angry :slight_smile: Check how I did it.

thank you for your effort Bartek, but I’m running into an issue. I’m trying to create a dynamic stream of content that reconfigures itself based on the viewport, and the issue I was running into was that columns were simply not cutting it. Sergie suggested I try using divs instead of columns, which has been working better for what I have been trying to do, but when I tried to use absolute positioning to layer several images on top of each other the images defaulted to the parent container, and not the div itself. Not quite sure what to do next.