Create a simple image slider without using any JQuery or Javascript.
CSS3 Image Slider
Create a simple image slider without using any JQuery or Javascript.
Learn How to use z-index and hover techniques together.
BASIC HTML & CSS
<html>
<head>
<style type="text/css">body{
background:-webkit-gradient(linear,left top,left bottom,from(#000),to(#222));
}
#pagewrap{
margin-left:300px;
margin-top:80px;
}
.image{
width:700px;
height:400px;
position:absolute;
border:5px solid #333;;
}
#one{
background:url(1.jpg) no-repeat;
background-size:1200px 400px;
}
#two{
background:url(2.jpg) no-repeat;
background-size:1200px 400px;
}
#three{
background:url(3.jpg) no-repeat;
background-size:1200px 400px;
}
#four{
background:url(4.jpg) no-repeat;
background-size:1200px 400px;
}
#one span{
position:absolute;
left:0px;
bottom:-56px;
display:block;
background:-webkit-gradient(linear,left top,left bottom,from(#444),to(#000));
width:175px;
height:50px;
z-index:1;
}
#one span:hover{
background:-webkit-gradient(linear,left top,left bottom,from(#000),to(#444));
}
#two span{
position:absolute;
left:175px;
bottom:-56px;
display:block;
background:-webkit-gradient(linear,left top,left bottom,from(#00f),to(#003));
width:175px;
height:50px;
}
#two span:hover{
background:-webkit-gradient(linear,left top,left bottom,from(#003),to(#00f));
}
#three span{
position:absolute;
left:350px;
bottom:-56px;
display:block;
background:-webkit-gradient(linear,left top,left bottom,from(#444),to(#000));
width:175px;
height:50px;
}
#three span:hover{
background:-webkit-gradient(linear,left top,left bottom,from(#000),to(#444));
}
#four span{
position:absolute;
left:525px;
bottom:-56px;
display:block;
background:-webkit-gradient(linear,left top,left bottom,from(#00f),to(#003));
width:175px;
height:50px;
}
#four span:hover{
background:-webkit-gradient(linear,left top,left bottom,from(#003),to(#00f));
}
.image:hover{
z-index:1;
}
a{
text-decoration:none;
text-align:center;
color:#FFF;
font-family:verdana;
font-size:20px;
text-align:center;
border-right:1px solid #fff;
text-shadow:1px 1px 2px #000;
}
</style>
</head>
<body>
<div id="pagewrap"><a id="one" class="image" href="#"><span>One</span></a>
<a id="two" class="image" href="#"><span>Two</span></a>
<a id="three" class="image" href="#"><span>Three</span></a>
<a id="four" class="image" href="#"><span>Four</span></a>
</div>
</body>
</html>
