Dreamweaver Tutorials back to dreamweaver tutorials home pagee contact form tutorial page
A value is required.Invalid format.A value is required.Invalid format.
Social Networks Our YouTube.com Channel Facebook Page

Transparent Layer Overlay Tutorial



Transparent layer Overlay's can seem quite daunting at first. This tutorial will show 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 class="holder">
<img alt="Alt text goes here" width="335" height="245" />
<div class="overlay">
<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.



Related Tutorials:

Transparent Overlay's in Dreamweaver - Video Tutorial


Share this Dreamweaver Article:

blog comments powered by Disqus

Dreamweaver Website Templates

Web Hosting Plans That I Use

  • GoDaddy.com Hosting Plans!Godaddy Hosting
  • Unlimited Hosting at HostGatorHostGator Hosting
  • JustHost.com Unlimited DomainsJustHost Hosting
  • Hosting just $4.88/month! - PowwebPow Web Hosting

PHP Luxury Contact Form Tutorial


Great Premium Shopping Cart

  • BigCommerce makes it easy to sell online. Click here to try it free!BigCommerce

    I highly reccommend this product for people who want to create an online store. it's easy to set-up and add products to and easy to manage back-of-house. Can also be used as an Ebay store.

Email Marketing - Recommended links

CSS Drop Down Menu - Dreamweaver

Floating Menu - Dreamweaver

Tabbed Navigation Menu

CSS Text Boxes in Dreamweaver

CSS 3 in Dreamweaver

J Query in Dreamweaver

Transparent Overlays Dreamweaver

CSS in Adobe Dreamweaver

All Types of Links In Dreamweaver

Positioning Elements in Dreamweaver

Unordered List Images Dreamweaver

Create an RSS Feed in Dreamweaver

Website Typography in Dreamweaver

Expanding Text Boxes - Dreamweaver

Make a Donation

Donate for Dreamweaver Tutorials