纯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

<div class="big_box">
    <a href="#">
        <div class="xian_di">
            <img src="images/111.jpg">
            <div class="yin_xian">
                <img src="images/gz_erweima.png">
            </div>
        </div>
    </a>
</div>

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