fading effect with centered horizontal list of images - html

Question

I have a container div with a width set to 100%. Inside the container, there is a wrapper div centered with a height of 80%
and a dynamic number of images listed horizontally with inline-block
.wrapper {
width: 100%;
}
.testimg{
height: 100%;
width: 100%;
}
#testDiv{
display: block;
width: 80%;
margin: 0 auto;
overflow-x: auto;
white-space: nowrap;
}
.testimgdiv{
width: 120px;
height: 100px;
display: inline-block;
}
<div id="testDiv">
<div class='testimgdiv'>
<img class="testimg" src="http://via.placeholder.com/100x100" />
</div>
<div class='testimgdiv'>
<img class="testimg" src="http://via.placeholder.com/100x100" />
</div>
<div class='testimgdiv'>
<img class="testimg" src="http://via.placeholder.com/100x100" />
</div>
<div class='testimgdiv'>
<img class="testimg" src="http://via.placeholder.com/100x100" />
</div>
<div class='testimgdiv'>
<img class="testimg" src="http://via.placeholder.com/100x100" />
</div>
<div class='testimgdiv'>
<img class="testimg" src="http://via.placeholder.com/100x100" />
</div>
</div>
I want the last image on the left and last image on the right to have a fading effect and not cut like shown in jsfiddle. Sort of like a carousel. Is there a way to do this with just css and html?
Thanks

Answer 1

You could do this with a linear gradient background applied to generated content :before and :after #testDiv
.wrapper {
position: relative;
max-width: 100%;
}
#testDiv {
overflow-x: auto;
white-space: nowrap;
margin: 0 auto;
}
.testimgdiv {
width: 120px;
height: 100px;
display: inline-block;
}
.testimg {
height: 100%;
width: 100%;
}
#testDiv:before,
#testDiv:after {
width: 40px;
height: 100%;
content: '';
position: absolute;
top: 0;
}
#testDiv:before {
left: 0;
background: linear-gradient(-90deg, rgba(255, 255, 255, 0), rgb(255, 255, 255));
}
#testDiv:after {
right: 0;
background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgb(255, 255, 255));
}
<div class="wrapper">
<div id="testDiv">
<div class='testimgdiv'>
<img class="testimg" src="http://via.placeholder.com/100x100" />
</div>
<div class='testimgdiv'>
<img class="testimg" src="http://via.placeholder.com/100x100" />
</div>
<div class='testimgdiv'>
<img class="testimg" src="http://via.placeholder.com/100x100" />
</div>
<div class='testimgdiv'>
<img class="testimg" src="http://via.placeholder.com/100x100" />
</div>
<div class='testimgdiv'>
<img class="testimg" src="http://via.placeholder.com/100x100" />
</div>
<div class='testimgdiv'>
<img class="testimg" src="http://via.placeholder.com/100x100" />
</div>
</div>
</div>