Home HTML CSS JAVASCRIPT BOOTSTRAP Python Docker ML tutorial ☰ About us Privacy policy

Opacity / Transparency in css


Opacity / Transparency in css:-


Transparent Image:-

The opacity property define the opacity/transparency of an element in HTML page.

Transparent Image:-

green-mountains-under-white-clouds-3646213
green-mountains-under-white-clouds-3646213
green-mountains-under-white-clouds-3646213

The opacity property can be define a value from 0.0 - 1.0. 


<style>
img {
  opacity: 0.5;
}
</style>
</head>
<body>

<h1>Image Transparency with code family</h1>


<p>Image with 50% opacity:</p>
 <img src="https://i.ibb.co/3ykckYn/green-mountains-under-white-clouds-3646213.jpg" alt="green-mountains-under-white-clouds-3646213" border="0" width="250px;">

Transparent Hover Effect in css:-

we are apply the Hover on the Images.

green-mountains-under-white-clouds-3646213
green-mountains-under-white-clouds-3646213
green-mountains-under-white-clouds-3646213 


<style>
img {
  opacity: 0.5;
}

img:hover {
  opacity: 1.0;
}
</style>


<h1>Image Transparency</h1>
<p>Code family</p>
 <img class='img1' src="https://i.ibb.co/3ykckYn/green-mountains-under-white-clouds-3646213.jpg" alt="green-mountains-under-white-clouds-3646213" border="0" width="250px;">

Transparent Box:-

it's using for the opacity property to add transparency to the background of an element in html

<style>
div {
  background-color: blue;
  padding: 10px;
}

div.first {
  opacity: 0.1;
}

div.second {
  opacity: 0.3;
}

div.third {
  opacity: 0.6;
}
</style>
</head>
<body>

<h1>Code family</h1>
<p>Code family</p>

<div class="first"><p>opacity 0.1</p></div>
<div class="second"><p>opacity 0.3</p></div>
<div class="third"><p>opacity 0.6</p></div>
<div><p>opacity 1 (default)</p></div>


More Topics