CSS Opacity
The transparency or opacity of an element is specified by its opacity property.
Transparent Image
The range of values for the opacity property is 0.0 to 1.0. The more transparent, the lower the value:
Example
img {
opacity: 0.5;
}
Transparent Hover Effect
To adjust the opacity upon mouse-over, the opacity property is frequently combined with the :hover selector:
------IMAGE MUKAVI------
Example
img {
opacity: 0.5;
}
img:hover {
opacity: 1.0;
}
Example explained
The code in Example 1 is comparable to the first CSS block. We’ve also included the expected behavior for when a user hovers over one of the photos. When the user hovers over this image, we want it to remain opaque. This is using opacity:1; as the CSS.
The image will revert to transparency when the mouse pointer leaves it.
An instance of the hover effect in reverse:
------IMAGE MUKAVI------
Example
img:hover {
opacity: 0.5;
}
Transparent Box
All of an element’s child elements inherit the same transparency when the element’s background is made transparent via the opacity attribute. This may make it difficult to read text contained within a fully translucent element:
------box mukva-------
Example
div {
opacity: 0.3;
}
Transparency using RGBA
Use RGBA color values if you don’t want to apply opacity to child elements, as we did in the previous example. The example below adjusts the opacity of the backdrop color rather than the text:
------box mukva-------
RGB can be used as a color value, as you discovered in our CSS Colors Chapter. You can utilize an RGB color value with an alpha channel (RGBA), which defines a color’s opacity, in addition to RGB.
The notation for an RGBA color value is rgba(red, green, blue, alpha). A number between 0.0 (completely transparent) and 1.0 (totally opaque) represents the alpha parameter.
Advice: Check out our CSS Colors Chapter for additional information on RGBA colors.
Example
div {
background: rgba(76, 175, 80, 0.3) /* Green background with 30% opacity */
}
Text in Transparent Box
------box mukva-------
Example
<html>
<head>
<style>
div.background {
background: url(klematis.jpg) repeat;
border: 2px solid black;
}
div.transbox {
margin: 30px;
background-color: #ffffff;
border: 1px solid black;
opacity: 0.6;
}
div.transbox p {
margin: 5%;
font-weight: bold;
color: #000000;
}
</style>
</head>
<body>
<div class="background">
<div class="transbox">
<p>This is some text that is placed in the transparent box.</p>
</div>
</div>
<script>class RocketElementorAnimation{constructor(){this.deviceMode=document.createElement("span"),this.deviceMode.id="elementor-device-mode",this.deviceMode.setAttribute("class","elementor-screen-only"),document.body.appendChild(this.deviceMode)}_detectAnimations(){let t=getComputedStyle(this.deviceMode,":after").content.replace(/"/g,"");this.animationSettingKeys=this._listAnimationSettingsKeys(t),document.querySelectorAll(".elementor-invisible[data-settings]").forEach(t=>{const e=t.getBoundingClientRect();if(e.bottom>=0&&e.top<=window.innerHeight)try{this._animateElement(t)}catch(t){}})}_animateElement(t){const e=JSON.parse(t.dataset.settings),i=e._animation_delay||e.animation_delay||0,n=e[this.animationSettingKeys.find(t=>e[t])];if("none"===n)return void t.classList.remove("elementor-invisible");t.classList.remove(n),this.currentAnimation&&t.classList.remove(this.currentAnimation),this.currentAnimation=n;let s=setTimeout(()=>{t.classList.remove("elementor-invisible"),t.classList.add("animated",n),this._removeAnimationSettings(t,e)},i);window.addEventListener("rocket-startLoading",function(){clearTimeout(s)})}_listAnimationSettingsKeys(t="mobile"){const e=[""];switch(t){case"mobile":e.unshift("_mobile");case"tablet":e.unshift("_tablet");case"desktop":e.unshift("_desktop")}const i=[];return["animation","_animation"].forEach(t=>{e.forEach(e=>{i.push(t+e)})}),i}_removeAnimationSettings(t,e){this._listAnimationSettingsKeys().forEach(t=>delete e[t]),t.dataset.settings=JSON.stringify(e)}static run(){const t=new RocketElementorAnimation;requestAnimationFrame(t._detectAnimations.bind(t))}}document.addEventListener("DOMContentLoaded",RocketElementorAnimation.run);</script></body>
</html>
Example explained
First, we create a <div> element (class=”background”) with a background image, and a border.
Then we create another <div> (class=”transbox”) inside the first <div>.
The <div class=”transbox”> have a background color, and a border – the div is transparent.
Inside the transparent <div>, we add some text inside a <p> element.
