How to create Fullscreen Image Slider Using Flexbox




In this tutorial, we will learn how to use combination of advanced CSS, HTML, and flex box to create the image slider page.



Hover over the photos to watch the effect:





Click to see full page >>


Open in code editor >>


Let's enter the deepest realms of CSS3 and learn how to create Fullscreen Image Slider using HTML and CSS flex box.


This is one of the best flexbox tutorials

This lesson include:


  • HTML Instructions
  • CSS Flex box Instructions





Part 1


Add HTML



Read the comments in grey to understand how CSS flexbox works:


Visit our HTML Editors lesson if you don't know how to open and edit HTML file:


HTML Editors >>



Code Example:

           <body>
       <!--section is the entire container that holds the photos  -->
  <section>
       <!--slide is the box that holds image and text  -->
    <div class="slide">
       <!--content holds the text  -->
      <div class="content">
       <!-- heading and paragraph of box 1 -->
         <h2>1</h2>
         <p>Add text here</p>
     </div>
    </div>
    <div class="slide">
      <div class="content">
       <!-- heading and paragraph of box 2 -->
         <h2>2</h2>
         <p>Add text here</p>
     </div>
    </div>
    <div class="slide">
      <div class="content">
       <!-- heading and paragraph of box 3 -->
         <h2>3</h2>
         <p>Add text here</p>
     </div>
    </div>
    <div class="slide">
      <div class="content">
       <!-- heading and paragraph of box 4 -->
         <h2>4</h2>
         <p>Add text here</p>
     </div>
    </div>
    <div class="slide">
      <div class="content">
       <!-- heading and paragraph of box 5 -->
         <h2>5</h2>
         <p>Add text here</p>
     </div>
    </div>
  </section>
</body> 
  
Try yourself >>





Part 2


Add CSS

Add the style sheets:


Code Example:

         
      <style>
@import 
url('https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700,800,900&display=swap');

*
/* font type and general setting of the page */
{
  box-sizing:border-box;
  margin:0;
  padding:0;
  font-family:'Poppins', sans-serif;
}
/* the entire container that holds the photos */
section
{
  width:100%;
  border:2px solid #000;
  display:flex;
  position:absolute;
  height:100vh;
}
/* box that holds image and text */
section .slide
{
  position:relative;
  height:100%;
  flex:1;
  background:#0f0;
  border-right:2px solid #000;
  transition:0.5s ease-in-out;
  overflow:hidden;
}
/* style when you hover over the slide box */
section .slide:hover
{
  flex-grow:5;
}
section .slide:last-child
{
  border-right:none;
}
/* the text area inside each box */
section .slide .content
{
  margin:40px;
  padding:30px;
  bottom:0;
  background:#000;
  position:absolute;
  color:#fff;
  transition:0s;
  opacity:0;
  visibility:hidden;
  transform: translateY(100px);
}
/* style when you hover */
section .slide:hover .content
{
  visibility:visible;
  transform: translateY(0);
  transition:0.5s;
  transition-delay:0.3s;
  opacity:1;
}
/* image and position of photo 1 */
section .slide:nth-child(1)
{
  background: url(../img/advancedcss2.jpg);
  background-position:center center;
}
/* image and position of photo 2 */
section .slide:nth-child(2)
{
  background: url(../img/advancedcss4.jpg);
  background-position:center center;
}
/* image and position of photo 3 */
section .slide:nth-child(3)
{
  background: url(../img/advancedcss1.jpg);
  background-position:center center;
}
/* image and position of photo 4 */
section .slide:nth-child(4)
{
  background: url(../img/advancedcss3.jpg);
  background-position:center center;
}
/* image and position of photo 5 */
section .slide:nth-child(5)
{
  background: url(../img/1212.jpg);
  background-position:center center;
}
</style> 
  

Try yourself >>










Learning CSS guide flexbox was never so easy, Learn CSS Flexbox, in this tutorial you can create an amazing image slider using CSS flexbox, now you can easily learn flexbox CSS, we offer free flexbox interactive tutorial

Navigation