CSS Image Opacity / Transparency

|  | Search W3Schools : |

HOME | HTML | CSS | XML | JAVASCRIPT | ASP | PHP | SQL | MORE... |  | References | Examples | Forum | About

ADVERTISEMENTS XML Certification Download XML editor Custom Programming |  |

Table of contents

CSS Basic
CSS HOME
CSS Introduction
CSS Syntax
CSS How To
CSS Background
CSS Text
CSS Font
CSS Border
CSS Outline
CSS Margin
CSS Padding
CSS List
CSS Table
CSS Advanced
CSS Dimension
CSS Classification
CSS Positioning
CSS Pseudo-class
CSS Pseudo-element
CSS Image Gallery
CSS Image Opacity
CSS Media Types
CSS Don't
CSS Summary
CSS Examples
CSS Examples
References
CSS2 Reference
CSS2 Print
CSS2 Aural
CSS Units
CSS Colors
CSS Colorvalues
CSS Colornames
CSS Quiz
CSS Quiz
CSS Exam

Selected Reading

Web Statistics
Web Glossary
Web Hosting
Web Quality
W3Schools Tutorials
W3Schools Forum
Helping W3Schools

# CSS Image Opacity / Transparency

Creating transparent images with CSS is easy.

## Examples

Creating transparent images - mouseover effect

Creating a transparent box with text on a background image

Note: This is not yet a CSS standard. However, it works in all modern browsers, and is a part of the W3C CSS 3 recommendation.

## Example 1 - Creating a Transparent Image

First we will show you how to create a transparent image with CSS.

Regular image:

The same image with transparency:

Look at the following source code:

    <img src="klematis.jpg" width="150" height="113" alt="klematis"
    style="opacity:0.4;filter:alpha(opacity=40)" />

Firefox uses the property opacity:x for transparency, while IE uses filter:alpha(opacity=x).

Tip: The CSS3 syntax for transparency is opacity:x.

In Firefox (opacity:x) x can be a value from 0.0 - 1.0. A lower value makes the element more transparent.

In IE (filter:alpha(opacity=x)) x can be a value from 0 - 100. A lower value makes the element more transparent.

## Example 2 - Image Transparency - Mouseover Effect

Mouse over the images:

The source code looks like this:

    <img src="klematis.jpg" style="opacity:0.4;filter:alpha(opacity=40)"
    onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100"
    onmouseout="this.style.opacity=0.4;this.filters.alpha.opacity=40" />

    <img src="klematis2.jpg" style="opacity:0.4;filter:alpha(opacity=40)"
    onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100"
    onmouseout="this.style.opacity=0.4;this.filters.alpha.opacity=40" />

We see that the first line of the source code is similar to the source code in Example 1. In addition, we have added an onmouseover attribute and an onmouseout attribute. The onmouseover attribute defines what will happen when the mouse pointer moves over the image. In this case we want the image to NOT be transparent when we move the mouse pointer over it.

The syntax for this in Firefox is: this.style.opacity=1 and the syntax in IE is: this.filters.alpha.opacity=100.

When the mouse pointer moves away from the image, we want the image to be transparent again. This is done in the onmouseout attribute.

## Example 3 - Text in Transparent Box

This is some text that is placed in the transparent box. This is some text that is placed in the transparent box. This is some text that is placed in the transparent box. This is some text that is placed in the transparent box. This is some text that is placed in the transparent box.

The source code looks like this:

    <html>
    <head>
    <style type="text/css">
    div.background
      {
      width: 500px;
      height: 250px;
      background: url(klematis.jpg) repeat;
      border: 2px solid black;
      }
    div.transbox
      {
      width: 400px;
      height: 180px;
      margin: 30px 50px;
      background-color: #ffffff;
      border: 1px solid black;
      /* for IE */
      filter:alpha(opacity=60);
      /* CSS3 standard */
      opacity:0.6;
      }
    div.transbox p
      {
      margin: 30px 40px;
      font-weight: bold;
      color: #000000;
      }
    </style>
    </head>

    <body>

    <div class="background">
    <div class="transbox">
    <p>This is some text that is placed in the transparent box.
    This is some text that is placed in the transparent box.
    This is some text that is placed in the transparent box.
    This is some text that is placed in the transparent box.
    This is some text that is placed in the transparent box.
    </p>
    </div>
    </div>

    </body>
    </html>

First, we create a div element (class="background") with a fixed height and width, a background image, and a border. Then we create a smaller div (class="transbox") inside the first div element. This div also have a fixed width, a background image, and a border. In addition we make this div transparent.

Inside the transparent div, we add some text inside a p element.

Ektron CMS400.NET Version 7.6 delivers all of the flexibility and features you need to deploy the Web site you want, quickly and efficiently. learn more...

6 ways to take your site to the next level with Ektron:

| Create site stickiness through social networking. Keep it personal, relevant and interactive and they'll come back for more.
| Keep it open. Your site needs to be ready and able to connect to outside services. Ektron's open API gives you maximum flexibility.
| Streamline content and document management. Users need to quickly and intuitively find and add information.
| Empower your content authors. Reduce IT bottlenecks by allowing business users to create and edit Web content and forms.
| Climb to the top of search rankings. SEO tools, URL aliasing and eCommerce for your digital marketing strategy
| Add powerful Web 2.0 tools like blogs, wikis, forums, geo-mapping, rating systems and RSS feeds easily.

See why there are 20,000+ Ektron integrations worldwide. Request an INSTANT DEMO or download a FREE TRIAL today.

WEB HOSTING
Dynamic button image generation
$15 Domain Name Registration Save $20 / year!
Buy UK Domain Names Register Domain Names
Cheap Domain Names Cheap Web Hosting
Best Web Hosting
PHP MySQL Hosting
Top 10 Web Hosting
UK Reseller Hosting
Web Hosting
FREE Web Hosting

WEB BUILDING
Website Templates Flash Templates Website Builder Internet Business Opportunity
Custom Programming
FREE Trial or Demo Web Content Manager Forms,Web Alerts,RSS
Download XML editor
FREE Flash Website
FREE Web Templates

EDUCATION
US Web Design Schools
HTML Certification
JavaScript Certification
XML Certification
PHP Certification
ASP Certification

HOME or Top of Page |  | Printer Friendly
W3Schools is for training only. We do not warrant the correctness of its content. The risk from using it lies entirely with the user. While using this site, you agree to have read and accepted our terms of use and privacy policy. Copyright 1999-2009 by Refsnes Data. All Rights Reserved.