I'm attempting to overlay one image on top of another, in order to create the effect of a scrapbook with the images appearing as if they are "taped" onto the homepage.
I want to maintain consistency with the tape layer while also allowing myself the flexibility to change the image underneath without affecting the positioning.
HTML:
<div id="container">
<div id="content">
<img class="gesture" src="http://i.imgur.com/rWgpQ6b.jpg" alt="Rain Hands" title="Rain Hands" />
<img class="tape" src="http://oi50.tinypic.com/nezz12.jpg" alt="tape" title="tape" />
<div class="text">
<h2>Rain Hands</h2>
<p>"When someone complains, 'I just felt a raindrop!,' the easiest way to prove his or her statement is to break out the Rain Hands. Hold both hands, palms facing upwards, out towards the sky. If you feel drops, then it is indeed raining. If you don't, then it isn't. Rain hands are fool-proof."<br /><br /><strong>Submitted By: </strong>Shaun</p>
</div>
</div>
</div>
CSS:
.gesture {
margin-left: 0;
margin-top: 45px;
width: 350px;
float: left; }
.tape {
margin-left: 10px;
margin-top: 45px;
position: absolute;
float: left;
width: 350px;
z-index: 1;}
The current result can be seen here:
However, my desired outcome is to have the tape overlaying the corners of the image.