Html 具有居中水平图像列表的淡入效果

我有一个宽度设置为100%的容器div。在容器内部，有一个以80%高度为中心的包装div 以及使用

内联块水平列出的动态图像数


.wrapper{
宽度：100%；
}
.睾丸{
身高：100%；
宽度：100%；
}
#testDiv{
显示：块；
宽度：80%；
保证金：0自动；
溢出-x：自动；
空白：nowrap；
}
.testimgdiv{
宽度：120px；
高度：100px；
显示：内联块；
}
您可以将线性渐变背景应用于生成的内容
:before
和
:before
\testDiv


.wrapper{
位置：相对位置；
最大宽度：100%；
}
#testDiv{
溢出-x：自动；
空白：nowrap；
保证金：0自动；
}
.testimgdiv{
宽度：120px；
高度：100px；
显示：内联块；
}
.睾丸{
身高：100%；
宽度：100%；
}
#testDiv：之前，
#testDiv：之后{
宽度：40px；
身高：100%；
内容：''；
位置：绝对位置；
排名：0；
}
#testDiv：之前{
左：0；
背景：线性梯度（-90度，rgba（255，255，255，0），rgb（255，255，255））；
}
#testDiv：之后{
右：0；
背景：线性梯度（90度，rgba（255，255，255，0），rgb（255，255，255））；
}

您是否有示例要看？我想我问的问题是错误的，这是一个很好的解决方案，但是是否可以在包装器div的左侧和右侧应用此效果？因此，所有通过左右两侧的图像都会得到相同的效果，在我的例子中效果很好，谢谢你的回答。