Free Online Courses for Software Developers - MrBool
× Please, log in to give us a feedback. Click here to login
×

You must be logged to download. Click here to login

×

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

×

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

How to Work with Opacity and Transparency using CSS

In this article I will cover the basics of CSS Opacity and Transparency. I will discuss how to use the different levels of opacity and write some examples to demonstrate the functionality.

Introduction:

This tutorial will cover the concept of image opacity using CSS. Before going further first of all let’s understand the meaning of opacity. Basically word opacity is used in respect of darkness, lightness, coating or transparency. This tutorial will cover the different aspect of opacity effects in images using CSS.

Listed script will explain transparency in images. For example we have taken 4 images first this program will display a image gallery of 4 images in full resolution and contrast. Other four images are same source images, only the difference between them is what is called their "opacity level". Following program will explain the idea of opacity in image using CSS.

Listing 1: Producing Transparency (Deciding Same Opacity Level) in an Image Gallery.

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.img
{
opacity:0.1;
filter:alpha(opacity=10); /* For IE8 and earlier */
display: inline;
        list-style: none;
        width: px;
        min-height: 175px;
        float: left;
        margin: 0 12px 12px 0;
        text-align: center;
}
.gallery  {
        display: inline;
        list-style: none;
        width: px;
        min-height: 175px;
        float: left;
        margin: 0 12px 12px 0;
        text-align: center;
	}
</style>

</head>
<body>
<h4> Images with Full Resolution and Contrast</h4>
<div class="gallery">
 <a target="_blank" href="abcd.htm"><img class='imagem_artigo' src="image1.jpg" alt="Flower" width="110" height="90" /></a>
 </div>
<div class="gallery">
 <a target="_blank" href="abcd.htm"><img class='imagem_artigo' src="image2.jpg" alt="Flower" width="110" height="90" /></a>
 </div>
<div class="gallery">
 <a target="_blank" href="abcd.htm"><img class='imagem_artigo' src="image3.jpg" alt="Flower" width="110" height="90" /></a>
 </div> 
<div class="gallery">
 <a target="_blank" href="abcd.htm"><img class='imagem_artigo' src="image4.jpg" alt="Flower" width="110" height="90" /></a>
</div>
<h4> Images in Transparent manner  </h4>
<div class="img">
 <a target="_blank" href="abcd.htm"><img class='imagem_artigo' src="image1.jpg" alt="Flower" width="110" height="90" /></a>
 </div>
<div class="img">
 <a target="_blank" href="abcd.htm"><img class='imagem_artigo' src="image2.jpg" alt="Flower" width="110" height="90" /></a>
 </div>
<div class="img">
 <a target="_blank" href="abcd.htm"><img class='imagem_artigo' src="image3.jpg" alt="Flower" width="110" height="90" /></a>
 </div> 
<div class="img">
 <a target="_blank" href="abcd.htm"><img class='imagem_artigo' src="image4.jpg" alt="Flower" width="110" height="90" /></a>
</div>
 </body>
</html>
Above figure is output of image gallery script in which 4 images are shown in original format and other four same images are holding the opacity property

Figure 1: Above figure is output of image gallery script in which 4 images are shown in original format and other four same images are holding the opacity property.

As you can see, the higher the opacity level the more you can see the image. An opacity level of 1.0 would be the original image as seen with no opacity applied. Following listed script will explain how to define different opacity level in series.

Listing 2: Script to Produce Opacity Level in Serial Way for Same Image

<!DOCTYPE html>
<html>
<head>
<style type="text/css">

.img
{
opacity:0.1;
filter:alpha(opacity=10);
display: inline;
}
.img1
{
opacity:0.3;
filter:alpha(opacity=30);
display: inline;
}
.img2
{
opacity:0.6;
filter:alpha(opacity=60);
display: inline;
}
.img3
{
opacity:0.8;
filter:alpha(opacity=80);
display: inline;
}
.gallery  {
        display: inline;
        list-style: none;
        width: px;
        min-height: 175px;
        float: left;
        margin: 0 12px 12px 0;
        text-align: center;
	}
</style>
</head>
<body>
<h4> Level 1: Images opacity level 0.1 (filter:alpha(opacity=10)  </h4>
<div class="img">
 <a target="_blank" href="abcd.htm"><img class='imagem_artigo' src="image1.jpg" alt="Flower" width="80" height="70" /></a>
 </div>
<div class="img">
 <a target="_blank" href="abcd.htm"><img class='imagem_artigo' src="image2.jpg" alt="Flower" width="80" height="70" /></a>
 </div>
<div class="img">
 <a target="_blank" href="abcd.htm"><img class='imagem_artigo' src="image3.jpg" alt="Flower" width="80" height="70" /></a>
 </div> 
<div class="img">
 <a target="_blank" href="abcd.htm"><img class='imagem_artigo' src="image4.jpg" alt="Flower" width="80" height="70" /></a>
</div>
<h4> Level 2: Images opacity level 0.3 (filter:alpha(opacity=30) </h4>
<div class="img1">
 <a target="_blank" href="abcd.htm"><img class='imagem_artigo' src="image1.jpg" alt="Flower" width="80" height="70" /></a>
 </div>
<div class="img1">
 <a target="_blank" href="abcd.htm"><img class='imagem_artigo' src="image2.jpg" alt="Flower" width="80" height="70" /></a>
 </div>
<div class="img1">
 <a target="_blank" href="abcd.htm"><img class='imagem_artigo' src="image3.jpg" alt="Flower" width="80" height="70" /></a>
 </div> 
<div class="img1">
 <a target="_blank" href="abcd.htm"><img class='imagem_artigo' src="image4.jpg" alt="Flower" width="80" height="70" /></a>
</div>
<h4> Level 3: Images opacity level 0.6 (filter:alpha(opacity=60) </h4>
<div class="img2">
 <a target="_blank" href="abcd.htm"><img class='imagem_artigo' src="image1.jpg" alt="Flower" width="80" height="70" /></a>
 </div>
<div class="img2">
 <a target="_blank" href="abcd.htm"><img class='imagem_artigo' src="image2.jpg" alt="Flower" width="80" height="70" /></a>
 </div>
<div class="img2">
 <a target="_blank" href="abcd.htm"><img class='imagem_artigo' src="image3.jpg" alt="Flower" width="80" height="70" /></a>
 </div> 
<div class="img2">
 <a target="_blank" href="abcd.htm"><img class='imagem_artigo' src="image4.jpg" alt="Flower" width="80" height="70" /></a>
</div> 
<h4> Level 4: Images opacity level 0.8 (filter:alpha(opacity=80)  </h4>
<div class="img3">
 <a target="_blank" href="abcd.htm"><img class='imagem_artigo' src="image1.jpg" alt="Flower" width="80" height="70" /></a>
 </div>
<div class="img3">
 <a target="_blank" href="abcd.htm"><img class='imagem_artigo' src="image2.jpg" alt="Flower" width="80" height="70" /></a>
 </div>
<div class="img3">
 <a target="_blank" href="abcd.htm"><img class='imagem_artigo' src="image3.jpg" alt="Flower" width="80" height="70" /></a>
 </div> 
<div class="img3">
 <a target="_blank" href="abcd.htm"><img class='imagem_artigo' src="image4.jpg" alt="Flower" width="80" height="70" /></a>
</div>
</body>
</html> 
figure is script of producing different opacity level in series. Figure shows 4 level of producing opacity

Figure 2: above figure is script of producing different opacity level in series. Figure shows 4 level of producing opacity.

Image opacity holds the various areas where it is useful. Now we will take a look of adding text description, defining a transparent image block within an original block, deciding opacity level for different frame. Further section will tell you that how to add different background frame within a block and text description.

Listing 3: Script to Create Different Frame Inside Original Block of Image and Adding Attributes

<html>
<head>
<style type="text/css">
.originalLayer
  {
  width:200px;
  height:150px;
  background:url(imagered1.png) repeat;
  display: inline;
  float: left;
  border:2px solid black;
  }
.originalLayer1
  {
  width:200px;
  height:150px;
  background:url(image2.jpg) repeat;
  display: inline;
  float: left;
  border:2px solid black;
  }
.originalLayer2
  {
  width:200px;
  height:150px;
  background:url(image1.jpg) repeat;
  display: inline;
  float: left;
  border:2px solid black;
  }
.midbox
  {
  width:120px;
  height:70px;
  margin:30px 50px;
  background-color:#ffffff;
  border:1px solid black;
  opacity:0.6;
  filter:alpha(opacity=60); 
  }
.midbox1
  {
  width:120px;
  height:70px;
  margin:30px 50px;
  background-color:#ffffff;
  border:1px solid black;
  opacity:0.3;
  filter:alpha(opacity=30); 
  }
.midbox2
  {
  width:120px;
  height:70px;
  margin:30px 50px;
  background-color:#ffffff;
  border:10px solid black;
  opacity:0.1;
  filter:alpha(opacity=10); 
  }

</style>
</head>

<body>

<div class="originalLayer">
<div class="midbox">
<p> First Text Description
</p>
</div>
</div>
<div class="originalLayer1">
<div class="midbox1">
<p> Second Text Description
</p>
</div>
</div>
<div class="originalLayer2">
<div class="midbox2">
<p> Third Text Description
</p>
</div>
</div>
</body>
</html>
Above figure is output of third listed script which tell us how to create different frame inside original block of image and adding different attributes

Figure 3: Above figure is output of third listed script which tell us how to create different frame inside original block of image and adding different attributes.

For this we have created 3 <div> class for background section, originalLayer, originalLayer 1, originalLayer 2 with different attributes. After that we have defined three more div classes for inside frame, midbox, midbox1, midbox2 with different attributes. Later we have each frame description.

There is one more concept, image link opacity effects on mouse hovering. This concept is used when developers want to show the links behind images and an opacity effects on mouse hovering. Following program will compile the idea of image link opacity effects on mouse hovering.

Listing 4: Script of Image Link Opacity Effects on Mouse Hovering

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.linkopacity img {
   	filter:alpha(opacity=10);
   	-moz-opacity: 0.4;
  	 opacity: 0.5;
   	-khtml-opacity: 0.4;
	display:outline;
        float:bottom;
         width:200px;
         height:150px;}

.linkopacity:hover img {
   	filter:alpha(opacity=100);   
   	-moz-opacity: 1.0;   
  	 opacity: 1.0;
  	 -khtml-opacity: 1.0; }
</style>

</head>
<body>
<h4> Example of image opacity on hovering mouse</h4>
<h2>Please poitn your mouse to see the opacity in image links </h2>

<a href="#" class="linkopacity"><img class='imagem_artigo' src="1.png"></a>
<a href="#" class="linkopacity"><img class='imagem_artigo' src="2.png"></a>
<a href="#" class="linkopacity"><img class='imagem_artigo' src="3.png"></a>
<a href="#" class="linkopacity"><img class='imagem_artigo' src="4.png"></a>
 </body>
</html>
script of image link opacity effects on mouse hovering. If you will hover your mouse, color frame will change its intensity of transparency

Figure 4: Above figure is output of script of image link opacity effects on mouse hovering. If you will hover your mouse, color frame will change its intensity of transparency.

Conclusion:

This tutorial covered the aspects of image opacity. I would suggest that create some HTML website and try to implement it there. Please comment here @Mrbool site, we are always here to help you.



I am having total 7+ years of experience in developing applications using C#, VB.NET, ASP.NET, Silverlight, WCF, SQL Server and Oracle. I am holding a M.Tech degree in Intelligent systems. For more information, visit my Linkedin p...

What did you think of this post?
Services
[Close]
To have full access to this post (or download the associated files) you must have MrBool Credits.

  See the prices for this post in Mr.Bool Credits System below:

Individually – in this case the price for this post is US$ 0,00 (Buy it now)
in this case you will buy only this video by paying the full price with no discount.

Package of 10 credits - in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download few videos. In this plan you will receive a discount of 50% in each video. Subscribe for this package!

Package of 50 credits – in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download several videos. In this plan you will receive a discount of 83% in each video. Subscribe for this package!


> More info about MrBool Credits
[Close]
You must be logged to download.

Click here to login