html模块

<div class="gc-item">
    <img src="images/index_06.jpg" alt=" ">
     <a href="#"><span>协安紫郡</span></a>
</div>

css代码

.gc-item{ position:relative; margin:15px 0; overflow:hidden; padding-top:60%;}
.gc-item img{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:100%;}
.gc-item a{ display:block; position:absolute; top:0; left:0; right:0; bottom:0; text-align:center; line-height:100%; color:#fff; background:rgba(0,0,0,0.5); opacity:0; transform:scale(0,0); transition:all 0.3s ease; font-size:24px;}
.gc-item a span{ position:absolute; top:40%; left:0; width:100%; text-align:center;}
.gc-item:hover a{ opacity:1;  transform:scale(1,1)}

包含鼠标移动上去时候图片放大效果，图片自适应宽高，遮罩层，文字水平、垂直居中效果，transform属性的使用