CSS中对图片的过度

1:鼠标hover时：出现文字并且图片的背景变暗：
html:
<div class="图片" alt='<input type="text">图片显示的文字'>
<img src="12.jpg" />

</div>
CSS：
.tupian {背景图片大小
380px;
height: 266px;
position: relative;相对背景图片的定位

}
upian:before{
content: attr(alt);出现的文字
380px;定义hover时的出现灰色的框，和背景图片一样的尺寸
height:266px;
/*background: red;*/
background: rgba(139, 139, 140, 0.8);灰色的图片的透明度
position: absolute;给灰色的图片的透明度定位到图片上面去
left:43px;
top:0px;
text-align:center;垂直居中
line-height: 280px;图片上文字的居中
opacity: 0;最开始不显示
}
.tupian:hover:before{hover时出现的效果
transition:opacity 2s;
opacity: 1;显示
color: #373d41;显示文字的颜色
font-size: 28px;显示文字的大小
}

2:鼠标hover时：背景图片变清晰：
html:

<div class="huian"></div>灰色框的区块
<img src="../images/TB1GwwiOXXXXXaVapXXXXXXXXXX-240-108.jpg" alt=""/>
</div>
CSS：
.huian{注：这个区块一定要设在图片的上面
239px;灰色区块的大小和背景图片一样尺寸呢
height: 108px;
background: rgba(243,243,244,.6);透明度
position: absolute;灰色图片的位置，相对背景图片的定位
top:49px;
left: 5px;
/*background:red;*/
opacity: 1;显示

/*z-index: 1;*/
}
.huian:hover{
opacity: 0;不显示
transition: all 2s;慢慢退出去的时间
/*transition:background 0.9s ease;*/
background: rgb(255, 255, 255);
}