How to create a Transparent Box

This tutorial will teach you how to make a image of your choice transparent by using a div to contain the image and some little CSS magic. Below is an example, hover over the image and you will see it become transparent.

End Product

Create a div

First off lets plug in some code into our HTML file that we will be applying our CSS to later on. Lets create a div and specify that it belongs to class transparentbox. Here is some sample code I used to create my div with class transparent

<div class="transparentbox">
              	

                </div>

Now lets place our image that we want to make transparent into our newly created div with class transparentbox. In this example we are using an oldbeautiful picture of Old Main Hill.

<div class="transparentbox">


                     <img src="oldmain.jpg" />


                </div>

Making it transparent using CSS

Now onto CSS, the attribute that makes transparency possible: opacity:x. Where x is a value between 0-1.0 that determnines how transparent an image is. 1 being non transparent and 0 being fully transparent

Now go into your CSS file and apply this code


              .transparentbox

              {
              

                   opacity:.4;
              

              }

What this code does

This CSS code applies to our newly made div with class transparent. Basically all its doing is making the div that we created have a 40% transparency and since our image is inside of the div it is also applying the transperancy to the image.

Conclusion

That's it! only a couple of lines a code and you can now make your image transparent! One last thing to adress is that opacity is not fully cross browser compatible yet so to fix this here is some extra code to add to your CSS file to fix this problem. Opacity:x is the standard and will soon be implemented to work with all browsers once CSS3 comes out but until then just add these two pieces of code and your all set to go!


                moz-opacity: 0.65; /* Mozilla Browsers
                

              filter:alpha(opacity=65); /* For IE6&7

Files