css carousel

by Nabaraj Saha

HTML

<div class="wrapper">
  <div class="left">
    <a href="#slide1">
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/14179/arnaud-mariat-IPXcUYHeErc-unsplash.jpg" alt="">
    </a>
    <a href="#slide2">
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/14179/anastasia-dulgier-NCFTGtjY3EQ-unsplash.jpg" alt="">
    </a>
    <a href="#slide3">
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/14179/kenan-sulayman-FV3M7igu8Fs-unsplash.jpg" alt="">
    </a>
    <a href="#slide4">
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/14179/matthew-smith-9CV6WrxxdrM-unsplash.jpg" alt="">
    </a>
    <a href="#slide5">
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/14179/vladimir-kondriianenko-bxwzcFy9YwM-unsplash.jpg" alt="">
    </a>
  </div>
  <div class="right">
    <a href="" id="slide1">
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/14179/arnaud-mariat-IPXcUYHeErc-unsplash.jpg" alt="">
    </a>
    <a href="" id="slide2">
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/14179/anastasia-dulgier-NCFTGtjY3EQ-unsplash.jpg" alt="">
    </a>
    <a href="" id="slide3">
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/14179/kenan-sulayman-FV3M7igu8Fs-unsplash.jpg0" alt="">
    </a>
    <a href=""  id="slide4">
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/14179/matthew-smith-9CV6WrxxdrM-unsplash.jpg" alt="">
    </a>
    <a href=""  id="slide5">
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/14179/vladimir-kondriianenko-bxwzcFy9YwM-unsplash.jpg" alt="">
    </a>
  </div>
</div>

CSS

.wrapper{
  overflow:hidden;
  display:flex;
  height:400px;
}
*{
  box-sizing:border-box;
}
.right{
  overflow:scroll;
  transform: all 0.3s linear;
  scroll-behavior: smooth;
}
.left{
  overflow-y:scroll;
  overflow-x:hidden;
}
.left img{
  object-fit: cover;
  filter: saturate(0);
  transition: 0.3s ease all;
}
.left img:hover{
  transform: scale(1.05);
  filter: saturate(1);
}
.left img, .right img{
  max-width:100%;
  height:auto;
}
a{
  display:block;
}
.left{
  width:20%;
}
.right{
  width:80%;
}