{"id":2626,"date":"2020-10-26T04:05:23","date_gmt":"2020-10-26T09:05:23","guid":{"rendered":"https:\/\/cssnewbie.com\/?p=2626"},"modified":"2020-10-26T04:05:23","modified_gmt":"2020-10-26T09:05:23","slug":"how-to-add-opacity-in-css","status":"publish","type":"post","link":"https:\/\/cssdeck.com\/blog\/how-to-add-opacity-in-css\/","title":{"rendered":"How To Add Opacity In CSS"},"content":{"rendered":"

\"How<\/p>\n

 <\/p>\n

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.<\/p>\n

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.<\/p>\n

Syntax:<\/strong><\/p>\n

.class-name {\nopacity: 0.0; \/\/Opacity level\n}<\/pre>\n
You can also set the opacity of an element using RGBA<\/a> (here a stands for alpha value).<\/p>\n
Let us see an example:<\/strong><\/p>\n
<html>\n  <title>\n \u00a0\u00a0 How To Add Opacity In CSS\n \u00a0 <\/title>\n\n<head>\n<link rel=\"stylesheet\" href=\"css.css\">\n<\/head>\n\n<body>\n<img id=\"pic1\" src=\"https:\/\/cdn.pixabay.com\/photo\/2017\/09\/16\/16\/09\/sea-2755908__340.jpg\" width=\"300\" height=\"200\">\n<img id=\"pic2\" src=\"https:\/\/cdn.pixabay.com\/photo\/2016\/05\/05\/02\/37\/sunset-1373171_960_720.jpg\" width=\"300\" height=\"200\">\n<img id=\"pic3\" src=\"https:\/\/cdn.pixabay.com\/photo\/2018\/01\/14\/23\/12\/nature-3082832__340.jpg\" width=\"300\" height=\"200\">\n<\/body>\n\n<\/html><\/pre>\n
 <\/p>\n
CSS File:<\/strong><\/p>\n
#pic1 {\nopacity: 1.0;\n}\n\n#pic2 {\nopacity: 0.7;\n}\n\n#pic3 {\nopacity: 0.3;\n}<\/pre>\n
\"How<\/p>\n
Opacity in Hover Effect<\/strong><\/h3>\n
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.<\/p>\n
Syntax:<\/strong><\/p>\n
.image {\nopacity: 0.5; \/\/Image is 50% transparent\n}\n\n.image:hover {\nopacity: 1.0;\n\/\/Fully opaque on mouse-over\n}<\/pre>\n
Let us see an example:<\/strong><\/p>\n
<html>\n<title>\nHow To Add Opacity In CSS\n<\/title>\n\n<head>\n<link rel=\"stylesheet\" href=\"opacity.css\">\n<\/head>\n\n<body>\n<h2>How To Add Opacity In CSS<\/h2>\n<p>We will add effects that will change with hover:<\/p>\n<h3> On Hover <\/h3>\n<img id=\"i1\" src=\"https:\/\/cdn.pixabay.com\/photo\/2016\/05\/05\/02\/37\/sunset-1373171__340.jpg\" width=\"170\" height=\"100\">\n<img id=\"i1\" src=\"https:\/\/cdn.pixabay.com\/photo\/2016\/08\/11\/23\/48\/italy-1587287__340.jpg\" width=\"170\" height=\"100\"><br><br>\n<h3> Without Hover <\/h3>\n<img id=\"i2\" src=\"https:\/\/cdn.pixabay.com\/photo\/2016\/05\/05\/02\/37\/sunset-1373171__340.jpg\" width=\"170\" height=\"100\">\n<img id=\"i2\" src=\"https:\/\/cdn.pixabay.com\/photo\/2018\/01\/14\/23\/12\/nature-3082832__340.jpg\" width=\"170\" height=\"100\">\n<\/body>\n\n<\/html><\/pre>\n
CSS File:<\/strong><\/p>\n
#i1 {\nopacity: 0.5;\n}\n\n#i1:hover {\nopacity: 1.0;\n}\n\n#i2 {\nopacity: 1.0;\n}\n\n#i2:hover {\nopacity: 0.5;}<\/pre>\n
\"How <\/strong><\/h3>\n
Text In A Transparent Box<\/strong><\/h3>\n
\u00a0<\/strong>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<\/a> 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 \u201ctransbox\u201d property sets the opacity only to the background and not to the text inside it.<\/p>\n
Steps to add text in the transparent box:<\/strong><\/p>\n
\u00a0<\/strong>You have to create a <div> element with a background image.<\/p>\n