CSS Image Opacity
How transparent or opaque an element looks is set with the opacity property.
Its value runs from 0.0 to 1.0: at 0.0 the element is completely transparent, at 0.5 it is 50% transparent, and at 1.0, the default, it is fully opaque.
Example
Prompt
Show three images side by side with different opacity values: 0.2, 0.5, and 1.0 (default). Use the same image for all three and label each with its opacity value.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Image Opacity</title>
<style>
img {
width: 150px;
height: 113px;
}
</style>
</head>
<body>
<h2>Image Opacity</h2>
<p>opacity 0.2</p>
<img src="img_forest.jpg" alt="Forest" style="opacity: 0.2;">
<p>opacity 0.5</p>
<img src="img_forest.jpg" alt="Forest" style="opacity: 0.5;">
<p>opacity 1.0 (default)</p>
<img src="img_forest.jpg" alt="Forest" style="opacity: 1.0;">
</body>
</html>
Opacity and :hover
A frequent pairing is opacity with the :hover pseudo-class, so that the opacity changes on mouse-over.
Example
Prompt
Show an image with opacity 0.5 by default that changes to opacity 1.0 on hover. Use a transition or direct opacity change on the :hover pseudo-class.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Opacity and Hover</title>
<style>
img {
opacity: 0.5;
}
img:hover {
opacity: 1.0;
}
</style>
</head>
<body>
<h2>Opacity and :hover</h2>
<p>Hover over the image to see the full opacity effect:</p>
<img src="img_forest.jpg" alt="Forest" width="170" height="113">
<img src="img_mountains.jpg" alt="Mountains" width="170" height="113">
</body>
</html>
Reversed Hover Effect
The effect also works in reverse: you can have images turn transparent on hover rather than opaque.
Example
Prompt
Show images that are fully opaque by default and become transparent (opacity 0.5) on hover. This is the reversed hover effect.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Reversed Hover Effect</title>
<style>
img:hover {
opacity: 0.5;
}
</style>
</head>
<body>
<h2>Reversed Hover Effect</h2>
<p>Hover over the image to make it transparent:</p>
<img src="img_forest.jpg" alt="Forest" width="170" height="113">
<img src="img_mountains.jpg" alt="Mountains" width="170" height="113">
</body>
</html>
Transparent Boxes
Add transparency to an element's background through the opacity property and every child element becomes just as transparent, which can leave the text inside hard to read.
Example
Prompt
Show four div boxes with a green background, each with different opacity values: 1, 0.6, 0.3, and 0.1. Include text inside each box to demonstrate that child elements also become transparent when using the opacity property.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Transparent Boxes</title>
<style>
div {
background-color: #04AA6D;
padding: 10px;
}
</style>
</head>
<body>
<h2>Transparent Boxes</h2>
<p>When using the opacity property, all child elements also become transparent:</p>
<div style="opacity: 1;"><p>opacity 1</p></div>
<div style="opacity: 0.6;"><p>opacity 0.6</p></div>
<div style="opacity: 0.3;"><p>opacity 0.3</p></div>
<div style="opacity: 0.1;"><p>opacity 0.1</p></div>
</body>
</html>
Transparency using background-color
Child elements stay unaffected if you skip opacity and give background-color an RGBA value.
RGBA is RGB plus an alpha channel holding a color's opacity. It is written rgba(red, green, blue, alpha), with alpha being a number from 0.0 (fully transparent) to 1.0 (fully opaque).
Example
Prompt
Show four div boxes using RGBA background color values instead of the opacity property. Use rgba(4, 170, 109, alpha) with alpha values of 1.0, 0.6, 0.3, and 0.1. Include text inside each box to show that the text remains fully opaque.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>RGBA Transparency</title>
<style>
div {
padding: 10px;
}
</style>
</head>
<body>
<h2>Transparency using RGBA</h2>
<p>With RGBA, only the background becomes transparent, not the text:</p>
<div style="background: rgba(4, 170, 109, 1.0);"><p>100% opacity</p></div>
<div style="background: rgba(4, 170, 109, 0.6);"><p>60% opacity</p></div>
<div style="background: rgba(4, 170, 109, 0.3);"><p>30% opacity</p></div>
<div style="background: rgba(4, 170, 109, 0.1);"><p>10% opacity</p></div>
</body>
</html>
Text in Transparent Box
Example
RGBA on the background color of a box over a background image gives a transparent text box whose text stays readable.
Prompt
Create a div with a background image (use klematis.jpg from PromptCookbook) and a border. Inside it, place another div with a semi-transparent white background using rgba(255, 255, 255, 0.6). Inside the transparent box, add a paragraph with bold black text saying "This is some text that is placed in the transparent box."
Output: complete HTML page
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Text in Transparent Box</title>
<style>
div.background {
background: url(https://prompt-cookbook.com) repeat;
border: 2px solid black;
}
div.transbox {
margin: 30px;
background-color: rgba(255, 255, 255, 0.6);
border: 1px solid black;
}
div.transbox p {
margin: 5%;
font-weight: bold;
color: #000000;
}
</style>
</head>
<body>
<h2>Text in Transparent Box</h2>
<div class="background">
<div class="transbox">
<p>This is some text that is placed in the transparent box.</p>
</div>
</div>
</body>
</html>