Opacity property in CSS

Sometimes opacity becomes most important property when we are overlapping the elements or to make a good user experience.
Opacity property is mostly used for images. But it can be used for div, span or any other elements.
Some web designers also use the opacity property for hiding an HTML element.

syntax: 

elementName{
opacity:value;
}

Let’s see what we can do with opacity property.

<html>
<head>
<style>
div#originaldiv
{
height:100px;
width:100px;
background-color:red;
}
div#usedopacity
{
height:100px;
width:100px;
background-color:red;
opacity:0.3;
}
</style>
</head>

<body>

<div id=”originaldiv”></div>original red color
<div id=”usedopacity”></div>using 0.3 opacity to red

</body>
</html>

output:

opacity property example

Now let’s see the effect of opacity on overlapped elements.

<html>
<head>
<style>
div#usedopacity
{
height:100px;
width:100px;
background-color:red;
opacity:0.3;
position: absolute;
}
</style>
</head>

<body>
<div id=”usedopacity”></div>
I am visible through this transparent div
</body>
</html>

Output:

opacity for overlapped elements

Now lets reduce the opacity after hovering the mouse on the image.

<html>
<head>
<style>
img
{
opacity: 0.3;
}
img:hover{
opacity: 1;
}
</style>
</head>

<body>
<p>hover the mouse on the image<p>
<img src=”http://seowebsiteblog.com/wp-content/uploads/2015/03/gun.jpg” >
</body>
</html>

image opacity output

How to create blinking text using CSS?

Using opacity in animation, we can create blinking text.

Comments

comments