How to make an Accordion Slider — HTML and CSS
By Saurabh SinghIn this CSS tutorial, today we will learn how we get the effect of accordion on the web page using CSS only. I’m just creating a simple image slider which is fully responsive and content comes but, on hover.
As you can see in my code inside the head tag in the style tag, the whole CSS code is typed.
Step by Step Approach to get Accordion Slider using HTML and CSS
- I’m taking ul li: nth-child () five times. Because of that, I’m able to divide the screen into five screens and style each screen particularly.
- And ul li: hover I’m giving the command of transition. There I’m not providing any number so that command work on all screens or you can do it by giving it numbers.
- And with the help of transition command, it takes 0.005 seconds to open that screen on which user will hover.
- And transition delay I’m using for the content when we hover on any screen after opening that screen, it will take 0.05 seconds to appear the content.
In the code, I’m using six images, you can use it as per your need.
CSS rotate animation on mouse hover
Code to get the Accordion Slider on your web page in CSS and HTML
<!DOCTYPE html>
<html>
<head>
<title> Pure CSS Content Slider </title>
<style>
body{
margin:0;
padding:0;
font-family: sans-serif;
}
ul{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100vh;
background: #ccc;
margin: 0;
padding: 0;
}
ul li{
list-style: none;
position: relative;
width: 20%;
height:100%;
border-right: 1px solid #000;
float: left;
box-sizing: border-box;
transition: 0.5s;
text-align: center;
overflow:hidden;
}
ul li:nth-child(1)
{
background: url(image1.jpg);
background-size:cover;
background-position:left;
}
ul li:nth-child(2)
{
background: url(image2.jpg);
background-size:cover;
background-position:left;
}
ul li:nth-child(3)
{
background: url(image3.jpg);
background-size:cover;
background-position:left;
}
ul li:nth-child(4)
{
background: url(image4.jpg);
background-size:cover;
background-position:left;
}
ul li:nth-child(5)
{
background: url(image5.jpg);
background-size:cover;
background-position:left;
}
ul:hover li
{
width:10%;
}
ul li:hover
{
width:60%;
}
ul li .content{
position :absolute;
bottom:-100%;
left:0;
width:100%;
background:rgba(0,0,0,0.8);
box-sizing:border-box;
color:#fff;
opacity:0;
}
ul li:hover .content{
bottom:0;
transition:0.5s;
transition-delay:0.5s;
opacity:.8;}
h2{
color:green;
font-size:45px;
font-family:Matura MT Script Capitals;
}
p{
color:white;
font-size:20px;
font-family:AR Julian;
}
</style>
</head>
<body>
<ul>
<li>
<div class="content">
<h2>Introduction</h2>
<p> Lorem ipsum dolor ...
</p>
</li>
<li><div class="content">
<h2>Our Story</h2>
<p> Lorem ipsum dolor ....</p>
</li>
<li><div class="content">
<h2>Our Goal</h2>
<p> Lorem ipsum dolor.....
</p>
</li>
<li><div class="content">
<h2>Our promise</h2>
<p> Lorem ipsum dolor .....</p>
</li>
<li><div class="content">
<h2>Inpiration</h2>
<p> Lorem ipsum dolor .....</p>
</li>
</ul>
</body>
</html>You may also learn
- Free cool 3d image hover effect source code download
- Responsive Image Hover Effect With Pure CSS Code
Leave a Reply