How to Use the CSS Opacity Property
See CSS: Tips and Tricks for similar articles.CSS3's opacity property makes it easy to change the opacity of images, text, :hover
to create rollover effects. Let's
look at an example:
- Start with the following HTML page:
- The
opacity
property modifies the percent opacity of the element it's applied to. A setting of 0 means that the element should be invisible, and a setting of 1 means that it should be 100% opaque. To make the caption on the picture in our page semi-transparent, change itsopacity
to .5.
The result will look like this:#caption { background: #fff; width:300px; position:relative; top:-100px; opacity: .5 }
- To make the caption opaque (and easier to read) when the mouse hovers over it, you can use the
:hover
pseudo-class to changeopacity
to 1 on hover.#caption:hover { opacity: 1; }
- Open the HTML page in a browser and hover your mouse over the caption to see it change.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS3 Opacity</title>
<style type="text/css">
#caption {
background: #fff;
width:300px;
position:relative;
top:-100px;
opacity: .5;
}
#caption:hover {
}
</style>
</head>
<body>
<div id="main">
<h1>CSS3 Opacity</h1>
<img src="Images/chicago.jpg" alt="Chicago skyline" id="img1">
<div id="caption">The Willis Tower (formerly known as the Sears Tower) is 1450 feet tall.</div>
</div>
</body>
</html>
If you open this page in a browser, it looks like this:

Related Articles
- Learn the Very Basics of CSS in One Minute
- How to Create a CSS External Style Sheet
- How to Align Text with CSS
- How to Create a Horizontal Navigation Menu with CSS
- How to Create a Fixed-Width Layout with CSS
- How to Remove Spacing Between Table Borders with CSS
- How to Set a Background Image with CSS
- How to Set Text Spacing and Placement in CSS
- How to Style a Table with CSS
- How to Create Boxes with Rounded Corners in CSS
- How to Create a Vertical Navigation Menu with CSS
- How to Use the CSS Opacity Property (this article)
- How to Use Multiple Background Images with CSS
- Absolute Positioning with CSS
- How to Use the CSS Border Shorthand Property
- How to Create CSS Button Links
- How to Create a Fluid-Width Layout with CSS
- How to Set Text and Background Color with CSS
- How to Create a CSS Embedded Style Sheet
- How to Add Inline Styles to CSS
- How to Create a Border with CSS
- How to Use the CSS Padding Shorthand Property
- How to Create a Fly-Out Menu with CSS
- How to Use CSS Media Queries in Responsive Design
- How to Adjust Margins with CSS
- How to Use the CSS Background Shorthand Property
- How to Create a Form without Tables Using CSS
- How to Modify Fonts in CSS
- How to Create a Drop-Down Menu with CSS
- How to Apply Padding with CSS
- Fixed Positioning with CSS
- How to Use CSS Transitions
- How to Use the CSS list-style Shorthand Property
- How to Change Text Style in CSS
- How to Create CSS Sprites
- How to Use CSS with Different Media Types
- How to Import Style Sheets with @import in CSS
- How to Use the CSS White-Space Property
- How to Use the CSS Z-index Property
- How to Create Drop Shadows with the box-shadow Property in CSS3