html鼠标悬停图片释义文字消失,纯css3鼠标经过出现文字或图片鼠标移走消失

纯css3鼠标经过出现图片鼠标移走消失(文字只需修改样式即可,需要相反的话只需改透明图)

css

.big_box{margin: 0;overflow: hidden; position: relative;}

.big_box a{ position: relative; display: block;width: 600px;height: 300px;}

.big_box a .xian_di{z-index: 1;margin: 0;width: 600px;height: 300px;overflow: hidden;}

.big_box a .xian_di>img{width: 100%;height: 100%;}

.big_box a .xian_di .yin_xian{text-align: center;  opacity: 0;z-index: 10; visibility:

visible;filter: alpha(opacity=0);   line-height: 100%;

-webkit-transition: all 0.5s ease;

background: rgba(0,0,0,.5); position: absolute;top:0;left: 0;padding-top: 30px;

width: 600px;height: 300px;overflow: hidden;}

.big_box a:hover .xian_di .yin_xian{opacity: 1;  filter: alpha(opacity=100);

visibility: visible;  -webkit-transform: scale(1, 1);  -moz-transform: scale(1, 1);

-ms-transform: scale(1, 1);  -o-transform: scale(1, 1);  transform: scale(1, 1);}

.hide{display:none;}

.on{border: 2px solid blueviolet;margin: -5px; padding: 3px;}

html

            

                

//本文来源于网络，本人总结起来并优化，分享给有需要的前端朋友，如有侵权，请联系删除，也请指正、批评