Slider Using HTML and CSS

Using jQuery its a bit difficult to create a slider bcoz you have to code a lot. If Your a lazy person (bcoz I’m) and wanna do the same thing then you can use this way (also if you have some other way to do the same thing then you can share with me) . If we can create the same thing using HTML and CSS then why we will go for J-Query or java script. Lets design our awesome slider.

Before starting make sure we have a folder so that our codes are organized in a proper manner. Create a folder what ever you want and inside that folder create two more folder
1. CSS Folder wher we will put our CSS file
2. Images Folder where we will put our Images.

HTML File:-

Index.html:

<html>
<head>
<title>Up Slider</title>
<link href=”css/style.css” rel=”stylesheet” type = “text/css”/>
</head>

<body>
<div id=”main-wrap”>
<div class=”main-block”>
<span id=”block1″> </span>
<div class=”thumb_content”>
<h1>Sample Title </h1>
<p>This is the text of Sample.</p>
<div><img src=”images/logo.gif”/></div>
</div>
</div><!–block–>

<div class=”main-block”>
<span id=”block1″> </span>
<div class=”thumb_content”>
<h1>Sample Title </h1>
<p>This is the text of Sample.</p>
</div>
</div><!–block–>

<div class=”main-block”>
<span id=”block1″> </span>
<div class=”thumb_content”>
<h1>Sample Title </h1>
<p>This is the text of Sample.</p>
<div><img src=”images/logo.gif”/></div>
</div>
</div><!–block–>

<div class=”main-block”>
<span id=”block1″> </span>
<div class=”thumb_content”>
<h1>Sample Title </h1>
<p>This is the text of Sample.</p>
</div>
</div><!–block–>

</div><!– wrap–>

</body>
</html>

CSS.html:

body{
font: 12px sans-serif;
margin: 10px 20px 0 20px;
}

#main-wrap{
width: 840px; height: 200px;
}

.main-block{
width: 200px; height: 200px; float: left;
display: block; overflow: hidden; position: relative;
margin: 0 4px 0 0; background: white; border: 1px solid #666;
}

#block1{
width: 200px; height: 200px;
position: absolute; display: block;
background: url(“../images/logo1.gif”) no-repeat;
/*background: url(“../images/logo.gif”) no-repeat;*/
-webkit-transition: top .3s ease-in-out;
}

.main-block:hover  #block1{
top: -150px;
}

.thumb_content{
padding: 70px 15px 0 15px;
color: #777;
}

.thumb_content h1{
margin: 0 0 5px 0;
color: #666;
font-size: 14px;
}
Images used in SLider:

logo

logo1

pic

Now have fun and I will anticipate your Feedback and Suggestion so don’t forget to comment.

Leave a Reply

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