Cool Revealing Image Slider With CSS Clip-Path

Preview:

Description:

A pretty cool, clip-path-based revealing image slider that interacts with mouseover. Written in PURE CSS.

How to use it:

1. Add clips to the slider.

<div class="slider">
  <div class="clip clip1">
    <div class="content">
      <h1>Slide One</h1>
      <p>Slide One Description</p>
    </div>
  </div>
  <div class="clip clip2">
    <div class="content">
      <h1>Slide Two</h1>
      <p>Slide Two Description</p>
    </div>
  </div>
  <div class="clip clip3">
    <div class="content">
      <h1>Slide One</h1>
      <p>Slide Two Description</p>
    </div>
  </div>
</div>

2. The main CSS for the image slider. Don’t forget to replace the background images with your own.

.main{
  position: relative;
  width: 800px;
  height: 500px;
  background-color: #222;
}
.main .clip{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transition: 0.5s;
}
.main .clip.clip1{
  background-image: url(bg-1.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  clip-path: polygon(0 0, 54% 0, 21% 100%, 0% 100%);
}
.main .clip.clip2{
  background-image: url(bg-2.jpg);
  background-repeat: no-repeat;
  background-size: cover;    
  clip-path: polygon(41% 0, 100% 0, 46% 100%, 19% 100%);
}
.main .clip.clip3{
  background-image: url(bg-3.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  clip-path: polygon(100% 0, 100% 0, 100% 100%, 36% 100%);
}
.main:hover .clip{
  clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
}
.main .clip:hover{
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}
.main .clip .content{
  position: absolute;
  bottom: -100%;
  left: 0;
  width: 70%;
  padding: 20px;
  background-color: #fff;
  opacity: 0;
  transition: 0.5s;
}
.main .clip:hover .content{
  bottom: 0;
  opacity: 1;
}