How to Use Transparent Images with CSS3

In this article we’re going to look at what you can do with the new opacity property in CSS3. We’re going to use it in three forms: As a transparent image, a hover effect and as text on a transparent (and layered) background.

Before we get into the CSS here, I want to briefly go over the uses of images. For this tutorial I used Corel PHOTO-PAINT X5 and saved all images using the JPEG format. While you can use PNG I recommend avoiding that because it will bloat your file sizes by 5-10x.

It’s important to consider is how the images will be used. If you need high quality, a setting of 8 will do the trick.. If the image is for a background and it’s not necessary that the image be really aharp, you could use a lower compression setting. This will create a smaller file size and will allow the image to load faster.

Another option is to use textured images for the background, which can reduce the file size by quite a bit. In this case, depending on the quality you want, you could make use of either JPEG or GIF. GIF files tend to be considerably smaller and they load faster as a result. This is also where you can use another form of PNG, PNG-8, which will give you 256 colors.

While the size of images isn’t as much of a concern now as it was years ago when dial-up was more common, it’s still a good practice to keep your file sizes down whenever possible since this will reduce page loading times. If your pages take too long to load you run the risk of losing your audience.

The Uses of Opacity

If you have several images with varying degrees of opacity, you can style the CSS with the appropriate tags (if you’re creating multiple pages with the same effect) or if it’s just for one page, you might want to add CSS styling to the appropriate images. Here’s what the code would look like as applied to a single image:

<!doctype html>
<html>
<head>
<meta charset=”utf-8″>
<title>Untitled Document</title>
<style>
#img {
opacity:0.4;
}
</style>
</head>

And here’s the result in the browser.

With different opacities applied to different images, here’s the code:

And this is the result

Note: With the opacity property, values range from 10.0 to 1.0. The lower the value, the more transparent the image becomes.

In this next section we’re going to apply a hover effect to two images. Here’s the code:

<!doctype html>
<html>
<head>
<meta charset=”utf-8″>
<title>Untitled Document</title>
<style>
img {
opacity:0.2;
}
img:hover {
opacity:1.0;
}
</style>
</head>
<body>
<p><img src=”butterfly.jpg” width=”300″ height=”231″ alt=”butterfly in saanich” /></p>
<p><img src=”coho.jpg” width=”300″ height=”224″ alt=”coho ferry” /></p>
</body>
</html>

Here’s what the images look like with the cursor hovered over one of the images.

In this section, we make use of the CSS box model and create three <div> elements inside each other. The first <div> element is for the background, which has a solid border color of white so it blends into the background of the page. The image makes use of the no-repeat property so it doesn’t tile.

After that, a smaller <div> is used for a box which uses a solid color that is transparent. For the final step we add some text inside a <p> element. Here’s the code:

<!doctype html>
<html>
<head>
<meta charset=”utf-8″>
<title>Untitled Document</title>
<head>
<style>
div.background
{
width:500px;
height:300px;
background:url(background.jpg) no-repeat;
border:2px solid white;
}
div.xbox
{
width:400px;
height:180px;
margin:50px 50px;
background-color:#000000;
border:1px solid black;
opacity:0.7;
}
div.xbox p
{
margin:30px 40px;
font-family:”Arial Black”, Gadget, sans-serif;
font-size:15px;
font-weight:bolder;
color:#ffffff;
}
</style>
</head>
<body>
<div class=”background”>
<div class=”xbox”>
<p>This is an example of text placed within the transparent box so you can see the effect. This is an example of text placed within the transparent box so you can see the effect. </p>
</div>
</div>
</body>
</html>

And this is the final result as seen in the browser (Google Chrome).

Another way you can use the opacity property is layering, which could produce some interesting effects. Here’s an example of code with the box model.

<!doctype html>
<html>
<style>
div.ex
{
width:220px;
height:50px;
padding:10px;
background-color:#ffffff;
border:5px solid gray;
opacity:1.0;
margin:0px;
}
div.med
{
width:200px;
height:35px;
padding:5px;
background-color:#0000ff;
border:1px solid black;
opacity:0.2;
border:solid #00F;
margin:0px;
}
div.small
{
width:180px;
height:20px;
padding:5px;
background-color:#ff0000;
border:1px solid black;
opacity:0.8;
border:solid #00F;
margin:0px;
}
</style>
</head>
<body>
<div class=”ex”>
<div class=”med”>
<div class=”small”>
</div>
</div>
</div>
</body>
</html>

And what this looks like in the browser.

Conclusion

As you can see, you can use the opacity property in a variety of ways: As a transparent image, a hover effect and as text on a transparent (and layered) background. And of course, you can vary these effects as necesary.
Have fun!

How to Use Transparent Images with CSS3

Nathan Segal

Recommended for you...

Company

Categories