CSS Image Overlay Example

Posted: 11/03/2013 in CSS Example, CSS Image Overlap, Css/HTML

Just a quick example of image overlay using HTML and CSS.

This little example places 4 images on the screen and overlaps the top right and left images with the bottom right and left images.

What to do

Create a new folder and call it “Image Overlay Example”

Save the following files into the new folder;

File #1 is the CSS style to position the images

1.  http://dl.dropbox.com/u/47818436/ImageOverlay/imageoverlay.css

File #2 id the HTML which calls up the CSS and positions the images on the screen

2. http://dl.dropbox.com/u/47818436/ImageOverlay/imageoverlay.html

File #3 is the image on the top left

3. http://dl.dropbox.com/u/47818436/ImageOverlay/Box1.png

File #4 is the image on the bottom left

4. http://dl.dropbox.com/u/47818436/ImageOverlay/Box2.png

File #5 is the image on the top right

5. http://dl.dropbox.com/u/47818436/ImageOverlay/Box3.png

File #6 is the image on the bottom right

6. http://dl.dropbox.com/u/47818436/ImageOverlay/Box4.png

Once all the files are saved open the imageoverlay.html to see the example and open and modify the imageoverlay.css to play around with the positioning.

I created the image examples in Paint.NET ( http://download.cnet.com/Paint-NET/3000-2192_4-10338146.html ), a great free tool for image creation and touchup if you don’t have one!!!

Image Size

For the sake of this simple example the images are all 200px wide and 110px high.

Image Positioning

I have arranged the images so they overlap by 10px (or 20px, can’t remember which one but you can work it out) top to bottom and meet together in the middle with no overlap.

Have a play around with the values in the CSS to reposition the images and see how you go.

Hope this little example helps clarify this frustrating little feature (one you will find may uses for).

Kind Regards

Peter Mole


What are you thinking?

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s