Image Overlapping With CSS How to Do ?

In this tutorial we are going to test how to do play with css and image and make them overlapped. Also we will test mouse hover effect.

So we took 4 alphabet images in PNG format ( We took PNG with transparent background )

Here are our Images.

So lets start with our html and css and make them overlap like this image below.

Here is our HTML code and CSS code for this.

<div>
    <img src="a.png" class="alphaa" />
    <img src="b.png" class="alphab" />
    <img src="c.png" class="alphac" />
    <img src="d.png" class="alphad" />	
</div>

.alphab{position:relative;left:-160px;top:80px;}
.alphac{position:relative;left:-360px;top:180px;}
.alphad{position:relative;left:-560px;top:280px;}

in our css code first important part is positioning and second important is from where to set position. So we use left and top

Lets play with another css increment and to add Mouse over effects on same CSS. So we are going to add :hover effect on those css

.alphaa{position:relative;left:0px;top:0px;z-index:1}
.alphab{position:relative;left:-160px;top:80px;z-index:1}
.alphac{position:relative;left:-360px;top:180px;z-index:2}
.alphad{position:relative;left:-560px;top:280px;z-index:3}
.alphaa:hover{z-index:4;}
.alphab:hover{z-index:4;}
.alphac:hover{z-index:4;}

with this modified code if we hover mouse over any alphabet it will overlap others and visible in full due to presence of z-index and its value. Like the image below.

 

 

this is how we can play with our images and css to make overlapping of images , and can design our collages , image galleries and other presentations on web pages.