How To Add Opacity In CSS

How To Add Opacity In CSS?

 

CSS is used to design various styles for your web pages. The opacity property in CSS sets the opacity of an element. It describes the transparency level of an element. The level of opacity varies from 0.0-1.0. Here value 0.0 means completely transparent, 0.5 is 50% transparent and 1.0 means it is fully opaque. The default value for an image opacity is 1.

It is very easy to add opacity to images using the opacity property. Also, note that this property sets the child element transparent as well. Thus making it hard to read the text inside a fully transparent element. The opacity of an element is set using the opacity property in your CSS file.

Syntax:

.class-name {
opacity: 0.0; //Opacity level
}

You can also set the opacity of an element using RGBA (here a stands for alpha value).

Let us see an example:

<html>
  <title>
    How To Add Opacity In CSS
   </title>

<head>
<link rel="stylesheet" href="css.css">
</head>

<body>
<img id="pic1" src="https://cdn.pixabay.com/photo/2017/09/16/16/09/sea-2755908__340.jpg" width="300" height="200">
<img id="pic2" src="https://cdn.pixabay.com/photo/2016/05/05/02/37/sunset-1373171_960_720.jpg" width="300" height="200">
<img id="pic3" src="https://cdn.pixabay.com/photo/2018/01/14/23/12/nature-3082832__340.jpg" width="300" height="200">
</body>

</html>

 

CSS File:

#pic1 {
opacity: 1.0;
}

#pic2 {
opacity: 0.7;
}

#pic3 {
opacity: 0.3;
}

How To Add Opacity In CSS?

Opacity in Hover Effect

In order to change the opacity of an image on mouse-over, the :hover selector is used along with the opacity property in CSS. This allows you to change the opacity of an image when you hover on an image. How does this hover effect work? When you hover over an image either you can make it transparent or opaque by setting image opacity and hover opacity property.

Syntax:

.image {
opacity: 0.5; //Image is 50% transparent
}

.image:hover {
opacity: 1.0;
//Fully opaque on mouse-over
}

Let us see an example:

<html>
<title>
How To Add Opacity In CSS
</title>

<head>
<link rel="stylesheet" href="opacity.css">
</head>

<body>
<h2>How To Add Opacity In CSS</h2>
<p>We will add effects that will change with hover:</p>
<h3> On Hover </h3>
<img id="i1" src="https://cdn.pixabay.com/photo/2016/05/05/02/37/sunset-1373171__340.jpg" width="170" height="100">
<img id="i1" src="https://cdn.pixabay.com/photo/2016/08/11/23/48/italy-1587287__340.jpg" width="170" height="100"><br><br>
<h3> Without Hover </h3>
<img id="i2" src="https://cdn.pixabay.com/photo/2016/05/05/02/37/sunset-1373171__340.jpg" width="170" height="100">
<img id="i2" src="https://cdn.pixabay.com/photo/2018/01/14/23/12/nature-3082832__340.jpg" width="170" height="100">
</body>

</html>

CSS File:

#i1 {
opacity: 0.5;
}

#i1:hover {
opacity: 1.0;
}

#i2 {
opacity: 1.0;
}

#i2:hover {
opacity: 0.5;}

How To Add Opacity In CSS?

Text In A Transparent Box

 When you add opacity property to a background it also sets the same property for its child. That means when you set opacity property to an image or background it will also set the same property to the text inside it. In order to make it visible we use the transparent box property. The “transbox” property sets the opacity only to the background and not to the text inside it.

Steps to add text in the transparent box:

 You have to create a <div> element with a background image.

  • Create another <div> inside the first <div> with class=“transbox” which has background color and is transparent.
  • Inside the second <div>, you can add text inside a <p> element.

Let us see an example:

<html>
<title>
How To Add Opacity In CSS
</title>

<head>
<link rel="stylesheet" href="opacity.css">
</head>

<body>
<div class="background">
<div class="transbox">
<p>Let us add some content to this page.</p>
</div>
</div>
</body>

</html>

CSS File:

 div.background {
background: url(https://cdn.pixabay.com/photo/2018/09/19/23/03/sunset-3689760__340.jpg) repeat;
}

div.transbox {
margin: 30px;
background-color: white;
border: 1px solid black ;
opacity: 0.2;
}

div.transbox p {
margin: 10%;
font-weight: bold;
color: #000000;
}

How To Add Opacity In CSS?

Conclusion

 In this tutorial, we learned how to add opacity in CSS. We also learned how to set opacity property on an image, in hover effect, and text in a transparent box. In the above examples, we used opacity, hover effect, and transparent properties. You can do this in another way by adding RGBA property in your CSS file.

To learn more such CSS codes, subscribe to our blog!

To see how to add links in CSS, visit our previous article!

Share and Enjoy !

0Shares
0 0

How To Add Links In CSS

  We generally add links in between the text on a webpage which in an actual sense creates a web and we get WorldWideWeb, right? Garlikov explains how links can be used to relate various ideas and set the navigation for different topics. No wonder, Springer calls links the “essence” of the online web. Now, […]

Read on...

How To Add Navigation Bar in CSS

  A good website is the one that provides visitors easy and quick access to information. This can be achieved by simply adding a navigation bar on your website. What is a navigation bar? It is a part of GUI within your website that helps users to easily navigate various pages of your website. It […]

Read on...

How To Add Forms In CSS

  We all have seen wonderfully designed forms on sites which compel us to fill the form without giving a reason to skip. Right? Yes, and that is the achievement of the coder and the sales team to get one more user, subscriber or lead. USABilla defines webforms as something that is used by customers […]

Read on...

How To Add A Background Image In CSS

  Images are a vital part of modern webpages and adding a background image gives a perfect touch to the look and feel of a webpage. DesignHill talks about how the background image is attention-grabbing and the most visually appealing element of any webpage. We will learn all about it by starting with a code […]

Read on...

How To Center An Image In CSS

  A picture speaks a thousand words. ThoughtMechanics explains the importance of images in a webpage and how they can impact your views, ideas, and perceptions. Thus, while learning web development it is important to learn how to format images. Images are the major ingredient of modern webpages. Without using them the page isn’t eye-catching. […]

Read on...

How To Add CSS Box Model

    “CSS Box Model” is generally referred to as design & layout in CSS. It is the box that can be imagined as concentric-rectangles which has the outer-most rectangle as margin. This rectangle is ordinarily transparent. The next rectangle inside represents a border which has a variable thickness and is filled with colors. Inside […]

Read on...

How To Change Text Color In CSS

Colors add a visual effect to the page. We may sometimes use it to highlight a word or a sentence or to signify a hyperlink. Design&Promote talks about the relation between colors and the human mind and how the human mind is impacted by the use of different colors. Well, whatever the purpose of our […]

Read on...

How To Link CSS To HTML

  The dynamic websites with such interactive User Experience that we see on the internet are built with a lot more than HTML alone. HTML, CSS, and JavaScript are the three important pillars of website development. HTML is where you would enter your content, CSS is where you would style your webpage and JavaScript is […]

Read on...

How To Comment In CSS

The exponential growth of programming in the last decade or two was due to the collaboration among the coders & developers. The interoperability of a code written by one worked well for other. The adhesive to it, out of many, is “comment”. You may wonder ‘How?’, but if you think it over again, I’m sure […]

Read on...