Please note that as of October 24, 2014, the Nokia Developer Wiki will no longer be accepting user contributions, including new entries, edits and comments, as we begin transitioning to our new home, in the Windows Phone Development Wiki. We plan to move over the majority of the existing entries over the next few weeks. Thanks for all your past and future contributions.

How to use CSS3 image overlay effect

From Wiki
Jump to: navigation, search

This article explains how to use the image overlay effect in CSS3.

Article Metadata
Dependencies: Chrome, Firefox, IE9
Created: Maveric (26 Jun 2012)
Last edited: Vaishali Rawat (19 Dec 2012)


We will add an image to the web page, where the image is in the background with border. In addition the image has a container below the image. Transpacency is added to it as a "see through" and in a form of a container to the image.

<img> tag is used and the for styling to make the block (positioning relatively to the bottom of the container.

Browser compatibility: Chrome, FF, IE9 at least.

Example code


<!DOCTYPE html>
<link rel="stylesheet" href="css/primary.css">
<div class="pic-box">
<img src="images/image.png" alt="alternate description">
<span>Image description text</span>


.pic-box {
position: releative;
width: 200px;
height: 200px;
border: 10px solid #ccc;
border-radius: 5px;
.pic-box span{
position: absolute;
background: rgba(0,0,0,.75);
padding: 15px;
font:1em Georgia, serif;
font-style: italic;

Gray border gives the necessary effect in this case, no other settings are required. The inner black container will be styled. For the span element we will apply some styline too. Specific positioning of the span will be made with the absolute setting. In resolution to the parent with set releatively (position: relative;) this will make the alignment correct now.

For this example an image of size 200x200 pixels is used. The div container is created as class and named as pic-box. If the image is not displayable then the alt shows the text instead. You can use something else for span, but in this example we will use it.

The 0.75 opacity will give the transparency we need. Opacity applies for the span element and anything within it. So we will remove the opacity and use rgba (alpha) instead. This singles out the colors.

With all the styling, you can do your own lodifications and see the changes.


There are adjustment needs when using IE 7,8 versions, but in Chrome and FF this should work just fine.

This page was last modified on 19 December 2012, at 09:59.
210 page views in the last 30 days.

Was this page helpful?

Your feedback about this content is important. Let us know what you think.


Thank you!

We appreciate your feedback.