css3图片展示代码

CSS3是Cascading Style Sheets（级联样式表）的第三个版本，是用于网页设计的样式表语言，它可以为网页添加丰富的效果和交互性。在CSS3中，有一项非常实用的功能：图片展示。

/*CSS3代码：图片展示*/
.container{
   display: grid;
   grid-template-columns: repeat(auto-fit,minmax(200px,1fr));
   grid-gap: 10px;
}

.item{
   position: relative;
   overflow: hidden;
}

.item img{
   display: block;
   height: 100%;
   width: 100%;
   transition: transform 0.5s;
}

.item:hover img{
   transform: scale(1.2);
}

.item::before{
   content: '';
   position: absolute;
   top: 0;
   bottom: 0;
   left: 0;
   right: 0;
   background: rgba(0,0.3);
   opacity: 0;
   transition: opacity 0.3s;
}

.item:hover::before{
   opacity: 1;
}

以上CSS3代码用于实现一个图片展示的效果，通过设置网格布局的方式，可以自适应不同屏幕尺寸。每个图片容器都有一个遮罩层，当鼠标悬停上去时，会有放大和遮罩层淡入淡出的效果，使得图片更具有立体感和交互性。