Posts tagged css

Image Overlay CSS

My friend wanted a simple way of overlaying an image (or text) on an image, ideally using CSS. After a quick google I found a nice looking example of what he was after. Juts going to post it here so I have it for future reference.

null

HTML:

<div class="image">
 <img src="http://farm8.staticflickr.com/7151/6707334701_af50daf3c5.jpg"/>
 <h2><span>Roseberry Topping</span></h2>
</div>

 
CSS:

.image {
 position: relative;
 width: 100%; /* for IE 6 */
}

h2 {
 position: absolute;
 top: 200px;
 left: 0;
 width: 100%;
}

h2 span {
 color: white;
 font: bold 24px/45px Helvetica, Sans-Serif;
 letter-spacing: -1px;
 background: rgb(0, 0, 0); /* fallback color */
 background: rgba(0, 0, 0, 0.7);
 padding: 10px;
}

Demo: http://imjam.es/sam/test.html
Source: http://css-tricks.com/text-blocks-over-image/