CSS Code To Make An Element Transparent

You may need to make an element transparent on your web page. In this post, I am going to tell you how to make an element transparent using CSS code.

There is a CSS property available which can make any CSS element transparent. The CSS property that can be used to make any element transparent is the opacity property.

How to use CSS opacity property to make an element transparent?

Suppose you want to make a CSS element transparent. Below is the CSS code which does this job nicely:

.css-element {
    opacity: 0.6;
}

The above code will make the element transparent. I have set the value of opacity property 0.6. This value can be anything from 0 to 1. A lower value of opacity makes the element more transparent.

• CSS Hover Animation Effects – CSS3 Transitions
• CSS Moving Background Image Animation

Now if you want to make all the images transparent then here is the CSS code which makes your images transparent:

img {
    opacity: 0.6;
}

 Change the opacity on mouse hover:

You may like to change the transparency amount or opacity value on mouse hover. Below is the code that will do this:

img {
    opacity: 0.6;
}

img:hover {
    opacity: 1.0;
}

It will make the images on a web page transparent. Whenever you hover over an image, you will see the image no more transparent. Actually, on mouse hover the opacity value become 1 which is the maximum value of opacity. It will not show you any transparency effect.

I have used the :hover selector in the code which applies the opacity value 1 for that element and thus the transparency value also changed.

So how was that? Is it not so easy to give transparency effect to any element using CSS code? I hope you understand this tutorial.