×
Namespaces

Variants
Actions
Revision as of 12:59, 19 December 2012 by Vaishali Rawat (Talk | contribs)

(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)

How to use CSS3 image overlay effect

From Nokia Developer Wiki
Jump to: navigation, search

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

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

Introduction

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

index.html

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

custom.css

.pic-box {
position: releative;
width: 200px;
height: 200px;
border: 10px solid #ccc;
border-radius: 5px;
}
 
.pic-box span{
position: absolute;
bottom:0;
left:0;
background: rgba(0,0,0,.75);
opacity:0.25;
color:#fff;
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.

Summary

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 12:59.
68 page views in the last 30 days.
×