USING Z-INDEX (HTML5 AND CSS3)

December 10, 2013

USING Z-INDEX (HTML5 AND CSS3)
-------------------------------------------------------

HTML CODE
-----------------
<!doctype html>
<html>
<head>
<title>
working with z-index
</title>
<link href="style.css" rel="stylesheet">
</head>
<body>

<section>
<article class="h">HOME</article>
<article class="a">ABOUT US</article>
<article class="s">SERVICES</article>
<article class="g">GALLERY</article>
<article class="c">CONTACT</article>
</section>

</body>
</html>

CSS FOR Z-INDEX MENU
----------------------------

*{
border:0px;
padding:0px;
margin:0px;
}
section {
width:850px;
padding:20px;
margin:100px auto;
position:relative;
}
section .h {
width:150px;
height:150px;
background:#ddd;
float:left;
border-radius:150px;
text-align:center;
line-height:150px;
z-index:1;
position:absolute;
left:0px;
}
section .a {
z-index:2;
position:absolute;
left:100px;
border-radius:150px;
text-align:center;
line-height:150px;
width:150px;
height:150px;
background:#ddd;
float:left;
}
section .s {
z-index:3;
position:absolute;
left:200px;
width:150px;
height:150px;
background:#ddd;
float:left;
border-radius:150px;
text-align:center;
line-height:150px;
}
section .g {
z-index:4;
position:absolute;
left:300px;
width:150px;
height:150px;
background:#ddd;
float:left;
border-radius:150px;
text-align:center;
line-height:150px;
}
section .c{

border-radius:150px;
text-align:center;
line-height:150px;
width:150px;
height:150px;
background:#ddd;
float:left;
z-index:5;
position:absolute;
left:400px;
}
.h, .a, .s, .g, .c {
border:1px solid #000;
}
.h:hover, .a:hover, .s:hover, .g:hover, .c:hover {
z-index:6;
background:#ffff00;
-webkit-transform:scale(1.2);
transition:0.5s;
}