Wie kann ich die rechte und linke Seite eines Scroll-Containers verwischen? ⇐ HTML

[Anonymous]

Ich versuche, die linke und rechte Seite des Containers mithilfe der Box-Shadow-Eigenschaft unscharf zu machen. Der Behälter (

Code: Select all

boxes

) enthält die aktuell angezeigten Boxen, da sich in diesem Container mehrere Boxen befinden, durch die mit zwei Schaltflächen gescrollt werden kann (mit IDs rückwärts und vorwärts).
Wie füge ich einen verblassenden Unschärfeeffekt zu den Rändern des Containers hinzu? Die entfernten Ränder sollten nicht sichtbar sein und dann sollte es allmählich heller werden.
Beispiel:


gegen meine:


html:

Code: Select all

[img]https://a0.muscache.com/pictures/b6005f78-45e6-403a-bc1d-3351ae83d149.jpg[/img]

Why host on Airbnb?
Hosts reveal what they love about sharing their space on Airbnb.




[img]https://a0.muscache.com/pictures/9ac19f4a-a59c-47f9-8223-09120b52cd2d.jpg[/img]

How to get started on Airbnb
From creating your listing to prepping your space, learn how to start hosting.




[img]https://a0.muscache.com/pictures/4d0cc0ed-ad85-4efd-b98e-386d22ab195a.jpg[/img]

How to earn money on Airbnb
Here's what every Host needs to know about pricing and payouts.




[img]https://a0.muscache.com/pictures/4efaca33-ca90-4d94-a79b-381cf0179355.jpg[/img]

Designing your space
Designing your space for guests can be a quick way to boost your bookings.




[img]https://a0.muscache.com/pictures/3cea79b0-79c3-4604-8fd9-7ef5cee4aa42.jpg[/img]

Secrets from a seasoned Superhost
Superhost Nikki shares her tips, from setting up to standing out.

css:

Code: Select all

.boxes-container {
margin-top: 2rem;
width: 100%;
position: relative;
}

.boxes {
display: flex;
overflow-x: scroll;
-ms-overflow-style: none;
scrollbar-width: none;
scroll-behavior: smooth;
// border: 2px solid red;
position: relative;

&::before, &::after {
content: '';
position: absolute;
top: 0;
width: 2rem;
height: 100%;
}

&::before {
box-shadow: 50px 0 50px #fff inset;
left: 0;
}

&::after {
box-shadow: -50px 0 50px #fff inset;
// box-shadow: -80px 0 #fff inset;
right: 0;
}

&::-webkit-scrollbar {display: none}

.box {
@include flexCenter(column);
align-items: flex-start;
gap: 1rem;
width: 332px;
max-width: 332px;
cursor: pointer;
margin-right: 2rem;
// background-color: green;

&#last-box {
padding-right: 2rem;
}

.img-container {

img {
width: 322px;
max-width: 322px;
height: 200px;
object-fit: cover;
border-radius: 10px;
}
}

h6 {
font-size: 18px;
}

p {
font-size: 14.5px;
font-weight: lighter;
letter-spacing: 0.1px;
}
}
}