Image Slider Using HTML and CSS

This tutorials are learn how to design slideshow using CSS. Adding a css slideshow to the homepage can be considered as one of the best methods available out there to enhance your website design. Some people think of that as a tedious task. But tools like CSS Slider have made the things easy for all the website. You just need learn and customize according to your specific needs and requirements.

index.html


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Untitled Document</title>
<link href="css/style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="wrap">

       <header>

           <label for="slide-to-1"></label>

           <label for="slide-to-2"></label>

           <label for="slide-to-3"></label>

           <label for="slide-to-4"></label>

           <label for="slide-to-5"></label>

           <label for="slide-to-6"></label>

           <label for="slide-to-7"></label>

 </header><input id="slide-to-1" name="slides" type="radio" checked="checked" />

        <section class="slide slide-one">

          <h1>
Hi this chandra kumar</h1>
<input type="button" name="signup" value="signup"/>

       </section>

       <input id="slide-to-2" name="slides" type="radio" />

       <section class="slide slide-two">

          <h1>
Heading two</h1>
</section>

       <input id="slide-to-3" name="slides" type="radio" />

        <section class="slide slide-three">

          <h1>
Heading three</h1>
</section>

       <input id="slide-to-4" name="slides" type="radio" />

        <section class="slide slide-four">

          <h1>
Heading four</h1>
</section>

       <input id="slide-to-5" name="slides" type="radio" />

        <section class="slide slide-five">

          <h1>
Heading five</h1>
</section>

       <input id="slide-to-6" name="slides" type="radio" />

        <section class="slide slide-six">

          <h1>
Heading six</h1>
</section>

       <input id="slide-to-7" name="slides" type="radio" />

        <section class="slide slide-seven">

          <h1>
Heading seven</h1>
</section>
</div>
</body>
</html>

style.css


  *{margin:0;

padding:0;

}

html,body{width:100%;height:100%;}

.wrap {

 width:1366px;

 height:600px;

 position:relative;

 overflow:hidden;

 text-align:center;

 color:#fff;

}

header{

 width:100%;

 height:50px;

 bottom:0;

 left:0;

 position:absolute;

 z-index:1000;

}

header label{width:15px; height:15px;display:inline-block;z-index:900;background-color:#fff;border-radius:50%; cursor:pointer;}

header label:hover{background-color:#39F;}

.slide{

      width:100%;

   height:100%;

   position:absolute;

   top:0;

   z-index:10;

   left:100%;

   background-size:cover !important;

   background-repeat:no-repeat !important;

   padding:8em 1em 0;

   transition:left 0s .75s;

 }

.slide h1{opacity:0;transform:translateY(100%); transition:transform .5s .5s,opacity .5s;}
.slide-one{background:url(../img/zoom-bg-1.jpg);}      //sample images               
.slide-two{background:url(../img/zoom-bg-2.jpg);}          
.slide-three{background:url(../img/zoom-bg-3.jpg);}
.slide-four{background:url(../img/zoom-bg-4.jpg);}
.slide-five{background:url(../img/zoom-bg-5.jpg);}
.slide-six{background:url(../img/zoom-bg-6.jpg);}
.slide-seven{background:url(../img/zoom-bg-7.jpg);}
[id^="slide"]:checked + .slide{left:0; z-index:100; transition:left .65s ease-out; }
[id^="slide"]:checked + .slide h1{opacity:1;transition:transform all .5s .5s; transform:translateY(0);}

Image Slider Using HTML and CSS

Image Slider Using HTML and CSS

chandrakumar

Related Posts

Contact Form