CSS Image Transparency
CSS Image Transparency
Image transparency is a common effect in web design that can make pages look more beautiful and professional. Using CSS, we can easily control the transparency of https://coder-cafe.com/wp-content/uploads/2025/09/images to create various visual effects. This article details how to achieve image transparency using CSS and provides several sample code examples.
1. Using the opacity Property to Set Image Transparency
The opacity property sets the transparency of an element, with a value ranging from 0 to 1, where 0 represents complete transparency and 1 represents complete opacity. We can control the transparency of an image by setting its opacity property.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Image transparency example</title>
<style>
.transparent-img {
opacity: 0.5;
}
</style>
</head>
<body>
<img src="https://static.deepinout.com/gk-static/https://coder-cafe.com/wp-content/uploads/2025/09/logo.png" alt="Geek Docs" class="transparent-img">
</body>
</html>
Output:
In the example above, we added a class called transparent-img to the image and set its opacity to 0.5 creates a semi-transparent effect. You can adjust the opacity value to change the image’s transparency as needed.
2. Using RGBA Colors to Set Image Transparency
In addition to using the opacity property, we can also use RGBA colors to set image transparency. RGBA colors consist of red, green, blue, and an alpha channel. The alpha channel represents transparency and has a value range of 0 to 1.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Image transparency example</title>
<style>
.transparent-img {
background-color: rgba(255, 255, 255, 0.5);
}
</style>
</head>
<body>
<img src="https://static.deepinout.com/gk-static/https://coder-cafe.com/wp-content/uploads/2025/09/logo.png" alt="Geek Docs" class="transparent-img">
</body>
</html>
Output:
In the example above, we added a class called transparent-img to the image and set its background color to RGBA(255, 255, 255, 0.5), which creates a semi-transparent white effect. You can adjust the alpha value in the RGBA to change the image’s transparency as needed.
3. Using CSS3’s opacity transition effect
We can also use
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Image transparency example</title>
<style>
.transparent-img {
opacity: 1;
transition: opacity 0.5s;
}
.transparent-img:hover {
opacity: 0.5;
}
</style>
</head>
<body>
<img src="https://static.deepinout.com/gk-static/https://coder-cafe.com/wp-content/uploads/2025/09/logo.png" alt="Geek Docs" class="transparent-img">
</body>
</html>
Output:
In the example above, we add a class called transparent-img to the image, set its initial opacity to 1, and set the opacity to 0.5 on hover. By setting the transition property, we achieve a smooth transition between the image’s transparency and the image’s opacity.
4. Using CSS3’s Opacity Animation Effect
In addition to transition effects, we can also use CSS3 animation effects to create more complex image transparency animations. Using the @keyframes rule and the animation property, we can define image transparency animation effects.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Image transparency example</title>
<style>
@keyframes fade {
from {
opacity: 1;
}
to {
opacity: 0.5;
}
}
.transparent-img {
animation: fade 2s infinite alternate;
}
</style>
</head>
<body>
<img src="https://static.deepinout.com/gk-static/https://coder-cafe.com/wp-content/uploads/2025/09/logo.png" alt="Geek Docs" class="transparent-img">
</body>
</html>
Output:
In the example above, we define a @keyframes rule called fade that fades from an opacity of 1 to 0.5. We then add a class called transparent-img to the image and set the animation property to fade 2s infinite alternate, meaning the opacity fades from 1 to 0.5 over 2 seconds and loops.
5. Use CSS Filters to Set Image Transparency
In addition to the above methods, we can also use CSS filters to set image transparency. By setting the opacity value of the filter property, we can achieve a transparent image effect.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Image transparency example</title>
<style>
.transparent-img {
filter: opacity(50%);
}
</style>
</head>
<body>
<img src="https://static.deepinout.com/gk-static/https://coder-cafe.com/wp-content/uploads/2025/09/logo.png" alt="Geek Docs" class="transparent-img">
</body>
</html>
Output:
In the example above, we added a class called transparent-img to the image and set its filter property to opacity(50%), which gives it 50% transparency. You can adjust the opacity value to change the image’s transparency as needed.
6. Using CSS Blend Modes to Set Image Transparency
CSS blend modes allow us to change the appearance of elements by applying different blending modes. We can use the mix-blend-mode property to set the transparency of an image.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Image transparency example</title>
<style>
.transparent-img {
mix-blend-mode: multiply;
}
</style>
</head>
<body>
<img src="https://static.deepinout.com/gk-static/https://coder-cafe.com/wp-content/uploads/2025/09/logo.png" alt="Geek Docs" class="transparent-img">
</body>
</html>
Output:
In the example above, we added a class named transparent-img to the image and set its mix-blend-mode to multiply, using the multiply blend mode to change the image’s transparency. You can experiment with different blend modes to achieve different transparency effects.
7. Using CSS Background-Opacity to Set Image Transparency
In addition to setting image transparency directly, we can also set the image’s background.## 8. Using CSS Pseudo-Elements to Set Image Transparency
We can also use CSS pseudo-elements to achieve image transparency. By adding a pseudo-element to the image’s parent element and setting its transparency, we can create a transparent image.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Image transparency example</title>
<style>
.image-container {
position: relative;
}
.image-container::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(255, 255, 255, 0.5);
}
</style>
</head>
<body>
<div class="image-container">
<img src="https://static.deepinout.com/gk-static/https://coder-cafe.com/wp-content/uploads/2025/09/logo.png" alt="Geek Docs">
</div>
</body>
</html>
Output:
In the example above, we add a class called image-container to the image’s parent element and set the background color of its ::before pseudo-element to RGBA(255, 255, 255, 0.5), which is a white semi-transparent effect. This achieves the image’s transparency.
9. Use CSS to fade in and out https://coder-cafe.com/wp-content/uploads/2025/09/images
We can use CSS animations to fade https://coder-cafe.com/wp-content/uploads/2025/09/images in and out, changing their transparency. By setting the opacity and visibility properties, we can create a gradual revealing and hiding effect.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Image transparency example</title>
<style>
.transparent-img {
opacity: 0;
visibility: hidden;
transition: opacity 0.5s, visibility 0.5s;
}
.transparent-img.show {
opacity: 1;
visibility: visible;
}
</style>
</head>
<body>
<img src="https://static.deepinout.com/gk-static/https://coder-cafe.com/wp-content/uploads/2025/09/logo.png" alt="Geek Docs" class="transparent-img">
<button onclick="showImage()">Show image</button>
<script>
function showImage() {
document.querySelector('.transparent-img').classList.add('show');
}
</script>
</body>
</html>
Output:
In the example above, we add a class called transparent-img to the image and set its initial opacity and visibility to 0 and hidden. We then use the transition property to achieve a gradient effect. When the button is clicked, the class name show is added via JavaScript, causing the image to appear and its opacity to gradually decrease to 1.
10. Using CSS Blur to Set Image Transparency
In addition to changing the image’s transparency, we can also use CSS blur effects to achieve transparency. By setting the blur value of the filter property, we can achieve a blurred, transparent image effect.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Image transparency example</title>
<style>
.transparent-img {
filter: blur(5px);
}
</style>
</head>
<body>
<img src="https://static.deepinout.com/gk-static/https://coder-cafe.com/wp-content/uploads/2025/09/logo.png" alt="Geek Docs" class="transparent-img">
</body>
</html>
Output:
In the above example, we added a class named transparent-img to the image and set its filter property to blur(5px), which creates a blurred transparency effect. You can adjust the blur value to adjust the image’s blur level as needed.
Through the example code above, we’ve detailed how to achieve image transparency using CSS, including various methods such as the opacity property, RGBA colors, transitions, animations, filters, blend modes, background transparency, pseudo-elements, fades, and blurs.