CSS中对图片的过度

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

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

}
upian:before{
???content: attr(alt);出现的文字
???width: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" />
</div>
CSS：
.huian{注：这个区块一定要设在图片的上面
???width: 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);
}