<figcaption>Pretty red mushroom</figcaption> <!--the caption that appears below the image-->
</figure>
<!--Image Two-->
<figure>
<img src="assets/polaroid02.jpg" width="200" height="200" alt="Rainbow near Keswick" />
<figcaption>Rainbow near Keswick</figcaption>
</figure>
<!--Image Three-->
<figure>
<img src="assets/polaroid03.jpg" width="200" height="200" alt="An old tree" />
<figcaption>Nice old tree</figcaption>
</figure>
</div> <!--end polaroid-->
CSS FOR THIS STEP
/***Because older browsers may not recognise, and therefore not know how to display, HTML5 elements we need add instructions to display them as block elemets***/
figure, figcaption{ /*add any other html5 elements you use*/
display:block;
}
/***Now style the containing div that we gave the id 'polaroid'***/
#polaroid{
padding:20px 10px;
/*setting a width and adding overflow:hidden will clear the floats we're going to apply to figure*/
width:100%;
overflow:hidden;
}
/***Position the figures containing the images and captions***/
#polaroid figure{
float:left; /*places the images in a horizontal line*/
position:relative; /*allows precise positioning of the tape in step 5- see support section below for more info*/
width:200px; /width of the images*/
margin:10px 20px; /*space between the images*/
}
Result
Pretty red mushroomRainbow near KeswickNice old tree
Step Two Style the Polaroid frames around the images
CSS FOR THIS STEP
#polaroid figure{
padding: 6px 8px 10px 8px; /*size of the frame*/
/*give the frame's background colour a gradient*/
background: #eee6d8; /*fallback colour for browsers that don't support gradients*/
Pretty red mushroomRainbow near KeswickNice old tree
Step Five Add sticky tape to the Polaroids - see the support section below to more info on creating a sticky tape effect
CSS FOR THIS STEP
figure:before { /*see the support section below to more info on using the :before psuedo element*/
content: '';
display: block;
position: absolute;
left:5px; /*postion from the left side of the frame (positive value move the tape right, negative moves it left)*/
top: -15px; /*position from the top of the frame (positive move it above the frame, negative below)*/
width: 75px; /*width of the tape*/
height: 25px; /*height of the tape*/
background-color: rgba(222,220,198,0.7); /*colour of the tape, use rgba to make it slightly transparent*/
/*rotate the tape 12 degrees anti-clockwise*/
-webkit-transform: rotate(-12deg);
-moz-transform: rotate(-12deg);
-o-transform: rotate(-12deg);
-ms-transform: rotate(-12deg);
}
/**The tape for the even numbered images needs to be rotated the opposite way, as the images are, and positioned on the other side of the frame, I've also changed the width slightly**/
figure:nth-child(even):before {
left:150px;
top: -15px;
width: 55px;
height: 25px;
-webkit-transform: rotate(12deg);
-moz-transform: rotate(12deg);
-o-transform: rotate(12deg);
-ms-transform: rotate(12deg);
}
Result
Pretty red mushroomRainbow near KeswickNice old tree
Full Code For You To Copy And Paste
HTML
<div id="polaroid">
<figure>
<img src="assets/polaroid01.jpg" width="200" height="200" alt="Red mushroom" />
<figcaption>Pretty red mushroom</figcaption>
</figure>
<figure>
<img src="assets/polaroid02.jpg" width="200" height="200" alt="Rainbow near Keswick" />
<figcaption>Rainbow near Keswick</figcaption>
</figure>
<figure>
<img src="assets/polaroid03.jpg" width="200" height="200" alt="An old tree" />
<figcaption>Nice old tree</figcaption>
</figure>
</div><!--end polaroid-->
The demo uses postition:absolute together with position:relative, so here's a brief explanation... position:relative -- lets you position an object relative to its normal position, using top, bottom, left and right position:absolute -- removes an object from the normal flow and positions it exactly where you say on the page position:relative with position:absolute -- lets you position a child element inside its parent. If you don't first use position:relative on the parent element, the absolutely positioned child will move outside the parent.
