Image With Captions (and a Twist)

CSS3 Image Captions

This is a demonstration of how to use css to add captions to an image. It’s also an illustration of how position relative and position absolute can work together. In this case the position relative div acts like a picture frame and like a picture frame can be placed anywhere (and tilted). The position absolute divs act like pictures within the frame and move with the frame but not within the frame. The HTML looks like this:

<div class="container" style = "position:relative;">
<img src="images/music/cbgb2.jpg" alt="cbgb" id = "cbgb" >
<div class="bottom-left" style = "position:absolute;">New York City 1977</div>
<div class="top-left" style = "position:absolute;">CBGB</div>
</div>

CBGB Omfug or to give it it's full name - Country Blue Grass Blues (and) other music for uplifting gormandisers - was a New York City country and western bar that became a legendary seventies punk rock venue featuring bands like Blondie, The Ramones, Talking Heads, Television, The Patti Smith Group and many more.