ransparent layer Overlay’s can seem quite daunting at first. This tutorial willshow you how to overlay a transparent PNG onto another image and put text on top of the transparent layer just like in the examples below:
If you downloaded the transparent image overlay exercise files, you will get some 3 images to practice with but most importantly for your website, you will get a transparent png overlay which is compatible with Dreamweaver and most other web design programs.
The dimensions of the transparent png are 335 pixels in width and 50 pixels in height but you can open the file in your image editor and adjust the size to fit your website design.
It is a good idea to make sure that the transparent image overlay is the same size as your base images otherwise it might look a little odd.
1. Add the Transparent Overlay html mark-up
Copy this Html code into your page. This is the necessary code for the transparent overlay to work. There is a containing div class called ‘holder’ and inside of the holder div is an image tag. Once you have pasted this code into your page you can then click inside of the image placeholder and use the point to file icon to swap the image for either one of your own images or for the images in the free downloaded Dreamweaver tutorial exercise files.
<div>
<img alt="Alt text goes here" width="335" height="245" />
<div>
<h3>Leaf on a Rock - Laying on Sand</h3>
</div> <!-- end class overlay -->
</div> <!-- end holder class -->
Inside of the holder div and after the image tag, we place another class div called ‘overlay’. Inside of ‘overlay’ there is an h3 title tag. This will contain the title text which will sit on top of the transparent layer.
2. Add the CSS for the Transparent Overlay
Now copy and paste the css transparent overlay code into a style sheet linked to your html document. This css code will control the image overlap and the css overlap text.
/*Holder is containing div set to relative with margins and
a 5 pixel dashed border */
.holder {
position:relative;
width:335px;
height:245px;
margin-bottom:20px;
border: 5px dashed #000;
}
/* .overlay contains your transparent overlay set to
a position of absolute */
.overlay {
position:absolute;
top:180px;
background-image:url(../images/transparent.png);
background-repeat:no-repeat;
width:335px;
height:50px;
}
/* The title which sits on top of the transparency */
.overlay h3 {
color:#FFF;
font-family:Tahoma, Geneva, sans-serif;
font-size:0.9em;
margin-top:17px;
padding-left:10px;
}
The holder div is set to a position of relative. The height and width are set to the same size as the image which is placed inside of it. The relative positioning was set so that the css images overlap or transparency div which in this case is called ‘overlay’ can be set with a position of absolute and can then be nudged into position using the ‘top’ attribute.
If you are using your own transparent images for the Dreamweaver tutorial then make sure you change the root directory for the background css transparent overlay you will be using.