CSS Image Opacity
The opacity property sets how transparent an element is.
The opacity property takes a value from 0.0 to 1.0:
- 0.0 — the element is completely transparent
- 0.5 — the element is 50% transparent
- 1.0 — the default; the element is fully visible
Tip: See the CSS Image Filters chapter to learn how to use the filter property to add visual effects like opacity, blur, and saturation to images.
Example
Set the opacity of an image to 0.5 to make it 50% transparent.
Prompt
Create a page showing three images of a forest side by side, each with a different CSS opacity value: 0.2, 0.5, and 1.0. Label each image with its opacity value below it.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Image Opacity</title>
<style>
body {
font-family: Arial, sans-serif;
}
.container {
display: flex;
gap: 20px;
align-items: flex-start;
}
.container div {
text-align: center;
}
.container img {
width: 200px;
height: auto;
}
.img1 {
opacity: 0.2;
}
.img2 {
opacity: 0.5;
}
.img3 {
opacity: 1.0;
}
</style>
</head>
<body>
<h2>Image Opacity</h2>
<div class="container">
<div>
<img class="img1" src="img_forest.jpg" alt="Forest">
<p>opacity 0.2</p>
</div>
<div>
<img class="img2" src="img_forest.jpg" alt="Forest">
<p>opacity 0.5</p>
</div>
<div>
<img class="img3" src="img_forest.jpg" alt="Forest">
<p>opacity 1.0 (default)</p>
</div>
</div>
</body>
</html>
Image Text Positioning
You can use CSS positioning to place text over an image at different locations.
Top Left
Position text at the top-left corner of an image.
Prompt
Create a page with a wide landscape image inside a container with position relative. Place white text "Top Left" at the top-left corner of the image using absolute positioning.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Image Text - Top Left</title>
<style>
body {
font-family: Arial, sans-serif;
}
.image-container {
position: relative;
display: inline-block;
}
.image-container img {
width: 100%;
max-width: 800px;
height: auto;
display: block;
}
.text {
position: absolute;
top: 8px;
left: 16px;
color: white;
font-size: 20px;
}
</style>
</head>
<body>
<h2>Image Text - Top Left</h2>
<div class="image-container">
<img src="img_5terre.jpg" alt="Cinque Terre">
<div class="text">Top Left</div>
</div>
</body>
</html>
Top Right
Position text at the top-right corner of an image.
Prompt
Create a page with a wide landscape image inside a container with position relative. Place white text "Top Right" at the top-right corner of the image using absolute positioning.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Image Text - Top Right</title>
<style>
body {
font-family: Arial, sans-serif;
}
.image-container {
position: relative;
display: inline-block;
}
.image-container img {
width: 100%;
max-width: 800px;
height: auto;
display: block;
}
.text {
position: absolute;
top: 8px;
right: 16px;
color: white;
font-size: 20px;
}
</style>
</head>
<body>
<h2>Image Text - Top Right</h2>
<div class="image-container">
<img src="img_5terre.jpg" alt="Cinque Terre">
<div class="text">Top Right</div>
</div>
</body>
</html>
Bottom Left
Position text at the bottom-left corner of an image.
Prompt
Create a page with a wide landscape image inside a container with position relative. Place white text "Bottom Left" at the bottom-left corner of the image using absolute positioning.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Image Text - Bottom Left</title>
<style>
body {
font-family: Arial, sans-serif;
}
.image-container {
position: relative;
display: inline-block;
}
.image-container img {
width: 100%;
max-width: 800px;
height: auto;
display: block;
}
.text {
position: absolute;
bottom: 8px;
left: 16px;
color: white;
font-size: 20px;
}
</style>
</head>
<body>
<h2>Image Text - Bottom Left</h2>
<div class="image-container">
<img src="img_5terre.jpg" alt="Cinque Terre">
<div class="text">Bottom Left</div>
</div>
</body>
</html>
Bottom Right
Position text at the bottom-right corner of an image.
Prompt
Create a page with a wide landscape image inside a container with position relative. Place white text "Bottom Right" at the bottom-right corner of the image using absolute positioning.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Image Text - Bottom Right</title>
<style>
body {
font-family: Arial, sans-serif;
}
.image-container {
position: relative;
display: inline-block;
}
.image-container img {
width: 100%;
max-width: 800px;
height: auto;
display: block;
}
.text {
position: absolute;
bottom: 8px;
right: 16px;
color: white;
font-size: 20px;
}
</style>
</head>
<body>
<h2>Image Text - Bottom Right</h2>
<div class="image-container">
<img src="img_5terre.jpg" alt="Cinque Terre">
<div class="text">Bottom Right</div>
</div>
</body>
</html>
Centered
Position text at the center of an image.
Prompt
Create a page with a wide landscape image inside a container with position relative. Place white text "Centered" in the exact center of the image using absolute positioning and transform translate.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Image Text - Centered</title>
<style>
body {
font-family: Arial, sans-serif;
}
.image-container {
position: relative;
display: inline-block;
}
.image-container img {
width: 100%;
max-width: 800px;
height: auto;
display: block;
}
.text {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: white;
font-size: 20px;
}
</style>
</head>
<body>
<h2>Image Text - Centered</h2>
<div class="image-container">
<img src="img_5terre.jpg" alt="Cinque Terre">
<div class="text">Centered</div>
</div>
</body>
</html>