.user_wns_wrjj990 { width:1000px; height:auto; overflow:hidden; cursor:pointer; } .user_wns_wrjj990 [fox=con] { width:calc((990px - 10px * 3) / 4); background:url(http://img14.360buyimg.com/cms/jfs/t2440/158/2211029431/63092/8a132fbf/56f8e700N59df203e.jpg) -616px 0 no-repeat; height:calc((990px - 10px * 3) / 4 / 3 * 4); position:relative; overflow:hidden; margin:10px 10px 0 0; float:left; } .user_wns_wrjj990 [fox=con] [fox$=_c]:nth-of-type(2n-1) { width:240px; height:240px; transform:rotate(45deg) skew(8deg,8deg); position:absolute; left:2px; } .user_wns_wrjj990 [fox=con] [fox$=_c]:nth-of-type(2n) { width:240px; height:240px; transform:rotate(45deg) skew(8deg,8deg); position:absolute; top:42px; } .user_wns_wrjj990 [fox^=top] { top:-151px; } .user_wns_wrjj990 [fox^=right] { left:148px; } .user_wns_wrjj990 [fox^=bottom] { bottom:-151px; } .user_wns_wrjj990 [fox^=left] { right:147px; } .user_wns_wrjj990 [fox=con]:hover [fox$=_c] { transform:none; width:100%; height:100%; top:0; left:0; } .user_wns_wrjj990 [fox=con] [fox$=_c]:hover { z-index:5; } .user_wns_wrjj990 [fox$=_c] [fox$=_con] { display:block; width:calc((990px - 10px * 3) / 4); height:calc((990px - 10px * 3) / 4 / 3 * 4); background-image:linear-gradient(0deg,#000,#000,#000); opacity:0.5; } .user_wns_wrjj990 [fox^=top] [fox$=_con] { transform:translateY(-100%); } .user_wns_wrjj990 [fox^=bottom] [fox$=_con] { transform:translateY(100%); } .user_wns_wrjj990 [fox^=left] [fox$=_con] { transform:translateX(-100%); } .user_wns_wrjj990 [fox^=right] [fox$=_con] { transform:translateX(100%); } .user_wns_wrjj990 [fox$=_c]:hover [fox$=_con] { transform:translateY(0); transition:all .3s linear; transform:translateX(0); }