Feather only side of a div and blur on only left and right side

Question

I have a list of images to scroll. I want that the left and right side of a div which is containing the images div container become blurred, and only one image is visible but the side one shows blurred. My code is below:

.img-tokry {
  width: 500px;
  /* flex-wrap: wrap;
  flex-direction: row; */
  padding: 2em 0;
  margin: 0 auto;
  gap: 2em;
  overflow-x: scroll;
  justify-content: space-between;
}

.nft-img {
  min-width: 100px;
  min-height: 100px;
  max-width: 200px;
  max-height: 200px;
  /* object-fit: fill; */
  border: 2px solid var(--cl-1--);
  box-shadow: 5px 5px 20px var(--cl-8--);
  border-radius: 15%;
  /* margin: 16px; */
}

.nft-img:hover {
  transform: scale(1.3);
  border-color: var(--cl-2--);
  box-shadow: none;
  margin: 5px 20px;
  transition: 0.3s ease-in-out;
}

<div class="img-tokry row">
  <div class="imgs">
    <img class="nft-img" src="/Graphics/IMGs/5-01.png" alt="NFT Image" />
  </div>
  <div class="imgs">
    <img class="nft-img" src="/Graphics/IMGs/5-01.png" alt="NFT Image" />
  </div>
  <div class="imgs">
    <img class="nft-img" src="/Graphics/IMGs/5-01.png" alt="NFT Image" />
  </div>
  <div class="imgs">
    <img class="nft-img" src="/Graphics/IMGs/5-01.png" alt="NFT Image" />
  </div>
  <div class="imgs">
    <img class="nft-img" src="/Graphics/IMGs/5-01.png" alt="NFT Image" />
  </div>
  <div class="imgs">
    <img class="nft-img" src="/Graphics/IMGs/5-01.png" alt="NFT Image" />
  </div>
  <div class="imgs">
    <img class="nft-img" src="/Graphics/IMGs/5-01.png" alt="NFT Image" />
  </div>
  <div class="imgs">
    <img class="nft-img" src="/Graphics/IMGs/5-01.png" alt="NFT Image" />
  </div>
  <div class="imgs">
    <img class="nft-img" src="/Graphics/IMGs/5-01.png" alt="NFT Image" />
  </div>
  <div class="imgs">
    <img class="nft-img" src="/Graphics/IMGs/5-01.png" alt="NFT Image" />
  </div>
  <div class="imgs">
    <img class="nft-img" src="/Graphics/IMGs/5-01.png" alt="NFT Image" />
  </div>
</div>

Nothing was expected as I don't know how to blur the sides, I didn't even find any blur options on the internet.

Kindly tell me the property which defines the blur of a div, and all the child divs etc in css, then I can set a separate blur for each side and my problem will be solved.

I don't want box shadow on the sides, I want blur and gradually the opacity to zero on left and right side.

Answer 1

if i understand properly you can use filter like below

       .img-tokry {
  width: 500px;
  /* flex-wrap: wrap;
  flex-direction: row; */
  padding: 2em 0;
  margin: 0 auto;
  gap: 2em;
  overflow-x: scroll;
  justify-content: space-between;
}

.nft-img {
  min-width: 100px;
  min-height: 100px;
  max-width: 200px;
  max-height: 200px;
  /* object-fit: fill; */
  border: 2px solid var(--cl-1--);
  box-shadow: 5px 5px 20px var(--cl-8--);
  border-radius: 15%;
  /* margin: 16px; */
}

.nft-img:hover {
  transform: scale(1.3);
  border-color: var(--cl-2--);
  box-shadow: none;
  margin: 5px 20px;
}

.imgs {
  filter: blur(1px);
  margin-bottom: 10px;
  transition: 0.s all !important;
}
.imgs:hover {
  filter: blur(0);
}

 <div class="img-tokry row">
        <div class="imgs">
          <img class="nft-img" src="/Graphics/IMGs/5-01.png" alt="NFT Image" />
        </div>
        <div class="imgs">
          <img class="nft-img" src="/Graphics/IMGs/5-01.png" alt="NFT Image" />
        </div>
        <div class="imgs">
          <img class="nft-img" src="/Graphics/IMGs/5-01.png" alt="NFT Image" />
        </div>
        <div class="imgs">
          <img class="nft-img" src="/Graphics/IMGs/5-01.png" alt="NFT Image" />
        </div>
        <div class="imgs">
          <img class="nft-img" src="/Graphics/IMGs/5-01.png" alt="NFT Image" />
        </div>
        <div class="imgs">
          <img class="nft-img" src="/Graphics/IMGs/5-01.png" alt="NFT Image" />
        </div>
        <div class="imgs">
          <img class="nft-img" src="/Graphics/IMGs/5-01.png" alt="NFT Image" />
        </div>
        <div class="imgs">
          <img class="nft-img" src="/Graphics/IMGs/5-01.png" alt="NFT Image" />
        </div>
        <div class="imgs">
          <img class="nft-img" src="/Graphics/IMGs/5-01.png" alt="NFT Image" />
        </div>
        <div class="imgs">
          <img class="nft-img" src="/Graphics/IMGs/5-01.png" alt="NFT Image" />
        </div>
        <div class="imgs">
          <img class="nft-img" src="/Graphics/IMGs/5-01.png" alt="NFT Image" />
        </div>
      </div>