Expanding slider in css

In this tutorial we'll create an expanding slider using HTML and CSS. Imagine you're building a portfolio to showcase your projects, and you want to display it on a website. This expanding slider is best for your website. where images expand when hovered over. Lets get started.

expanding slider in css

Basic Structure

HTML

  
<div class="container">
  
  <div class="slider">
  
    <div class="slide">
  
      <img src="image1.jpg" />
  
    </div>
  
    <div class="slide">
  
      <img src="image2.jpg" />
  
    </div>
  
    <div class="slide">
  
      <img src="image3.jpg" />
  
    </div>
  
    <div class="slide">
  
      <img src="image4.jpg" />
  
    </div>
  
    <div class="slide">
  
      <img src="image5.jpg" />
  
    </div>
  
  </div>
  
</div>
  

We have a container div, that holds the entire slider.

Inside the container, there’s a slider that contains multiple slides. each slide contains a image

CSS

now we’ll use CSS to bring this slider

  
html,
  
body {
  
  margin: 0;
  
  padding: 0;
  
  height: 100%;
  
}
  
.container {
  
  display: flex;
  
  align-items: center;
  
  justify-content: center;
  
  width: 100%;
  
  height: 100%;
  
}
  
.slider {
  
  width: 80vw;
  
  height: 80vh;
  
  display: flex;
  
}
  
.slide {
  
  position: relative;
  
  flex: 1 0 auto;
  
  overflow: hidden;
  
  transition: all 0.5s ease-in-out;
  
}
  
.slide:hover {
  
  flex: 5;
  
}
  
.slide img {
  
  position: absolute;
  
  max-height: 100%;
  
  min-width: 100%;
  
  left: 50%;
  
  transform: translateX(-50%);
  
}
  

.html, body - We made the margin zero so that the whole width and height of the page are used. Then there's no empty space around the text.

.container - We centered the container horizontally on the page. This is because this is where it will hold the slider in the middle of the screen.

.slider - the slider is set to take up 80% of the width and height of the screen. The display: flex makes the slides (images) line up in a row, beside each other.

.slide - Each slide has a flexible size, starting at an equal width. The transition makes any changes smooth, allowing the slides to grow when hovered over.

.slide img - The image will always fit within the slide because it's in the middle of each slide and won't get stretched out in some odd shape.

.slide{ flex: 5; } - This is the magic part! When you hover over a slide it grows up in size, that takes up more space (5 times its original width). That makes the hovered image pop out.

Conclusion

Creating this kind of responsive image slider is a great way to add modern and interactive elements to your website. You do not need any JavaScript, only a few lines of HTML and CSS! Try more slides, change sizes, or alter the hover effects as required for your design work.

Happy coding.