纯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>