Pro HTML5 and CSS3 Design Patterns

CHAPTER 14 ■ IMAGES

Content over Image

HTML

<h1>Content over Image</h1>

<div class="figure">

<h3 class="caption">Crater Lake North Rim</h3>

<p id="crater-date"><img src="star.gif" alt="" /> August 4, 2003

<img src="star.gif" alt="" /></p>

<img class="framed" width="518" height="389"

src="crater-lake.jpg" alt="Crater Lake North Rim August 4, 2003" /></div>

CSS

.figure { float:left; position:relative;

color:white; background-color:black; }

.figure .caption { position:absolute; margin:15px; left:0; top:0;

font-size:1.05em; }

.framed { display:block;

border-left:1px solid gray; border-right:2px solid black;

border-top:1px solid gray; border-bottom:2px solid black; }

#crater-date { position:absolute; left:0; bottom:10px; width:518px;

text-align:center; color:white; font-size:0.8em; }