.content { width:200px; height: 100%; overflow:hidden; position: absolute; right:30px; z-index:5; } .content2 { width:200px; height: 100%; overflow:hidden; position: absolute; z-index:5; } .content3 { width:200px; height: 100%; overflow:hidden; position: absolute; right:30px; z-index:5; } .pic_block{ width: 100%; height: -moz-calc(100%/4); height: -webkit-calc(100%/4); height: calc(100%/4); position: relative; overflow: hidden; } .pic_block:before{ position: absolute; top: 10px; right: 15px; color: #fff; content: attr(data-eng); font-size:14px; z-index: 1; text-decoration:none; } .pic_block:after{ left: 0; top: 0; content: attr(data-zh); font-size:11px; display: block; position: absolute; width: 100%; height: 100%; text-align: right; padding-top: 100%; padding-right: 15px; color: #fff; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; transition: all 1s; } .pic_block.b1:hover:after,.pic_block.b2:hover:after,.pic_block.b3:hover:after,.pic_block.b4:hover:after,.pic_block.b5:hover:after,.pic_block.b6:hover:after,.pic_block.b7:hover:after,.pic_block.b8:hover:after,.pic_block.b9:hover:after,.pic_block.b10:hover:after,.pic_block.b11:hover:after,.pic_block.b12:hover:after,.pic_block.b13:hover:after,.pic_block.b14:hover:after,.pic_block.b15:hover:after,.pic_block.b16:hover:after,.pic_block.b17:hover:after,.pic_block.b18:hover:after,.pic_block.b19:hover:after,.pic_block.b20:hover:after,.pic_block.b21:hover:after,.pic_block.b22:hover:after,.pic_block.b23:hover:after,.pic_block.b24:hover:after,.pic_block.b25:hover:after,.pic_block.b26:hover:after,.pic_block.b27:hover:after,.pic_block.b28:hover:after,.pic_block.b29:hover:after,.pic_block.b30:hover:after,.pic_block.b31:hover:after,.pic_block.b32:hover:after{ opacity: 1; -moz-opacity: 1; filter: alpha(opacity=100); filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100); -ms-filter:'progid:DXImageTransform.Microsoft.Alpha(Opacity=100)'; padding-top: 40px; text-decoration:none; }