只在div的一侧加羽，只在左侧和右侧加模糊

Question

我有一个要滚动的图像列表。我想，这是包含图像div容器的div的左侧和右侧变得模糊，只有一个图像是可见的，但一方显示模糊。我的代码如下:

.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>

什么都没有，因为我不知道如何模糊两边，我甚至没有在网上找到任何模糊选项。

请告诉我属性的模糊定义的一个div，和所有的子div等css，然后我可以设置一个单独的模糊为每一边，我的问题将解决

我不希望在侧面有框阴影，我想要模糊，并逐渐将左右两侧的不透明度降为零。

Answer 1

如果我理解正确的话，你可以像下面这样使用filter

.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>