Full Screen Slider
<html>
<head>
<title>Full Screen Slider</title>
</head>
<body>
<section>
<div class="slide">
<div class="content">
<h2>Slider One</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris.</p>
</div>
</div>
<div class="slide">
<div class="content">
<h2>Slider Two</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris.</p>
</div>
</div>
<div class="slide">
<div class="content">
<h2>Slider Three</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris.</p>
</div>
</div>
<div class="slide">
<div class="content">
<h2>Slider Four</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris.</p>
</div>
</div>
<div class="slide">
<div class="content">
<h2>Slider Five</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris.</p>
</div>
</div>
</section>
</body>
</html>
<style type="text/css">
*{
margin: 0px;
padding: 0px;
font-family: arial;
box-sizing: border-box;
}
section{
position: absolute;
width: 100%;
height: 100vh;
display: flex;
border: 2px solid #000;
}
section .slide{
position: relative;
background-color: #0f0;
height: 100%;
flex: 1;
border-right: 2px solid #000;
overflow: hidden;
transition: 0.5s ease-in-out;
}
section .slide:last-child{
border-right: none;
}
section .slide .content{
position: absolute;
bottom: 0px;
margin: 40px;
padding: 30px;
background-color: #000;
color: #fff;
visibility: hidden;
opacity: 0;
transition: 0;
transform: translateY(100px);
}
section .slide:hover{
flex-grow: 5;
}
section .slide:hover .content{
visibility: visible;
opacity: 1;
transition: 0.5s;
transition-delay: 0.5s;
transform: translateY(0);
}
section .slide:nth-child(1){
background: url(image.jpg);
background-position: center center;
}
section .slide:nth-child(2){
background: url(image.jpg);
background-position: center center;
}
section .slide:nth-child(3){
background: url(image.jpg);
background-position: center center;
}
section .slide:nth-child(4){
background: url(image.jpg);
background-position: center center;
}
section .slide:nth-child(5){
background: url(image.jpg);
background-position: center center;
}
</style>
Comments
Post a Comment