纯CSS照片墙+开关灯+放大

上代码：
HTML：

<!--开关灯 GO-->
<div class="m-openlight">
<div class="content">
    <!-- 1 -->
    <div class="cont left">
        <div class="pic"><a href="#"><img src="https://uimgproxy.suning.cn/uimg1/sop/commodity/RsLcAA8X_Socgs8CplUg6w.jpg"/></a></div>
        <a class="mask" href="#"></a>
        <div class="cont_in position-lt css3">
            <div class="pic"><a href="#"><img src="https://uimgproxy.suning.cn/uimg1/sop/commodity/RsLcAA8X_Socgs8CplUg6w.jpg" alt="" /></a></div>
        </div>
    </div>
    <!-- 1 -->
    <div class="cont">
        <div class="pic"><a href="#"><img src="https://uimgproxy.suning.cn/uimg1/sop/commodity/dy_tfTajuXq0gArsiUOpyA.jpg"/></a></div>
        <a class="mask" href="#"></a>
        <div class="cont_in position-lt css3">
            <div class="pic"><a href="#"><img src="https://uimgproxy.suning.cn/uimg1/sop/commodity/dy_tfTajuXq0gArsiUOpyA.jpg" alt="" /></a></div>
        </div>
    </div>
    <!-- 1 -->
    <div class="cont">
        <div class="pic"><a href="#"><img src="https://uimgproxy.suning.cn/uimg1/sop/commodity/GU9XGTZ0nedxVKqfwOnMbg.jpg"/></a></div>
        <a class="mask" href="#"></a>
        <div class="cont_in position-lt css3">
            <div class="pic"><a href="#"><img src="https://uimgproxy.suning.cn/uimg1/sop/commodity/GU9XGTZ0nedxVKqfwOnMbg.jpg" alt="" /></a></div>
        </div>
    </div>
    <!-- 1 -->
    <div class="cont">
        <div class="pic"><a href="#"><img src="https://uimgproxy.suning.cn/uimg1/sop/commodity/-xW4n7Zi8d61EsKY0srKyw.jpg"/></a></div>
        <a class="mask" href="#"></a>
        <div class="cont_in position-lt css3">
            <div class="pic"><a href="#"><img src="https://uimgproxy.suning.cn/uimg1/sop/commodity/-xW4n7Zi8d61EsKY0srKyw.jpg" alt="" /></a></div>
        </div>
    </div>
    <!-- 1 -->
    <div class="cont">
        <div class="pic"><a href="#"><img src="https://uimgproxy.suning.cn/uimg1/sop/commodity/RsLcAA8X_Socgs8CplUg6w.jpg"/></a></div>
        <a class="mask" href="#"></a>
        <div class="cont_in position-lt css3">
            <div class="pic"><a href="#"><img src="https://uimgproxy.suning.cn/uimg1/sop/commodity/RsLcAA8X_Socgs8CplUg6w.jpg" alt="" /></a></div>
        </div>
    </div>
    <!-- 1 -->
    <div class="cont">
        <div class="pic"><a href="#"><img src="https://uimgproxy.suning.cn/uimg1/sop/commodity/dy_tfTajuXq0gArsiUOpyA.jpg"/></a></div>
        <a class="mask" href="#"></a>
        <div class="cont_in position-lt css3">
            <div class="pic"><a href="#"><img src="https://uimgproxy.suning.cn/uimg1/sop/commodity/dy_tfTajuXq0gArsiUOpyA.jpg" alt="" /></a></div>
        </div>
    </div>
    <!-- 1 -->
    <div class="cont">
        <div class="pic"><a href="#"><img src="https://uimgproxy.suning.cn/uimg1/sop/commodity/GU9XGTZ0nedxVKqfwOnMbg.jpg"/></a></div>
        <a class="mask" href="#"></a>
        <div class="cont_in position-lt css3">
            <div class="pic"><a href="#"><img src="https://uimgproxy.suning.cn/uimg1/sop/commodity/GU9XGTZ0nedxVKqfwOnMbg.jpg" alt="" /></a></div>
        </div>
    </div>
    <!-- 1 -->
    <div class="cont">
        <div class="pic"><a href="#"><img src="https://uimgproxy.suning.cn/uimg1/sop/commodity/-xW4n7Zi8d61EsKY0srKyw.jpg"/></a></div>
        <a class="mask" href="#"></a>
        <div class="cont_in position-lt css3">
            <div class="pic"><a href="#"><img src="https://uimgproxy.suning.cn/uimg1/sop/commodity/-xW4n7Zi8d61EsKY0srKyw.jpg" alt="" /></a></div>
        </div>
    </div>
    <!-- 1 -->
    <div class="cont">
        <div class="pic"><a href="#"><img src="https://uimgproxy.suning.cn/uimg1/sop/commodity/RsLcAA8X_Socgs8CplUg6w.jpg"/></a></div>
        <a class="mask" href="#"></a>
        <div class="cont_in position-rt css3">
            <div class="pic"><a href="#"><img src="https://uimgproxy.suning.cn/uimg1/sop/commodity/RsLcAA8X_Socgs8CplUg6w.jpg" alt="" /></a></div>
        </div>
    </div>
    <!-- 1 -->
    <div class="cont left">
        <div class="pic"><a href="#"><img src="https://uimgproxy.suning.cn/uimg1/sop/commodity/dy_tfTajuXq0gArsiUOpyA.jpg"/></a></div>
        <a class="mask" href="#"></a>
        <div class="cont_in position-lb css3">
            <div class="pic"><a href="#"><img src="https://uimgproxy.suning.cn/uimg1/sop/commodity/RsLcAA8X_Socgs8CplUg6w.jpg" alt="" /></a></div>
        </div>
    </div>
    <!-- 1 -->
    <div class="cont">
        <div class="pic"><a href="#"><img src="https://uimgproxy.suning.cn/uimg1/sop/commodity/GU9XGTZ0nedxVKqfwOnMbg.jpg"/></a></div>
        <a class="mask" href="#"></a>
        <div class="cont_in position-lb css3">
            <div class="pic"><a href="#"><img src="https://uimgproxy.suning.cn/uimg1/sop/commodity/GU9XGTZ0nedxVKqfwOnMbg.jpg" alt="" /></a></div>
        </div>
    </div>
    <!-- 1 -->
    <div class="cont">
        <div class="pic"><a href="#"><img src="https://uimgproxy.suning.cn/uimg1/sop/commodity/-xW4n7Zi8d61EsKY0srKyw.jpg"/></a></div>
        <a class="mask" href="#"></a>
        <div class="cont_in position-lb css3">
            <div class="pic"><a href="#"><img src="https://uimgproxy.suning.cn/uimg1/sop/commodity/-xW4n7Zi8d61EsKY0srKyw.jpg" alt="" /></a></div>
        </div>
    </div>
    <!-- 1 -->
    <div class="cont">
        <div class="pic"><a href="#"><img src="https://uimgproxy.suning.cn/uimg1/sop/commodity/RsLcAA8X_Socgs8CplUg6w.jpg"/></a></div>
        <a class="mask" href="#"></a>
        <div class="cont_in position-lb css3">
            <div class="pic"><a href="#"><img src="https://uimgproxy.suning.cn/uimg1/sop/commodity/RsLcAA8X_Socgs8CplUg6w.jpg" alt="" /></a></div>
        </div>
    </div>
    <!-- 1 -->
    <div class="cont">
        <div class="pic"><a href="#"><img src="https://uimgproxy.suning.cn/uimg1/sop/commodity/dy_tfTajuXq0gArsiUOpyA.jpg"/></a></div>
        <a class="mask" href="#"></a>
        <div class="cont_in position-lb css3">
            <div class="pic"><a href="#"><img src="https://uimgproxy.suning.cn/uimg1/sop/commodity/dy_tfTajuXq0gArsiUOpyA.jpg" alt="" /></a></div>
        </div>
    </div>
    <!-- 1 -->
    <div class="cont">
        <div class="pic"><a href="#"><img src="https://uimgproxy.suning.cn/uimg1/sop/commodity/GU9XGTZ0nedxVKqfwOnMbg.jpg"/></a></div>
        <a class="mask" href="#"></a>
        <div class="cont_in position-lb css3">
            <div class="pic"><a href="#"><img src="https://uimgproxy.suning.cn/uimg1/sop/commodity/GU9XGTZ0nedxVKqfwOnMbg.jpg" alt="" /></a></div>
        </div>
    </div>
    <!-- 1 -->
    <div class="cont">
        <div class="pic"><a href="#"><img src="https://uimgproxy.suning.cn/uimg1/sop/commodity/-xW4n7Zi8d61EsKY0srKyw.jpg"/></a></div>
        <a class="mask" href="#"></a>
        <div class="cont_in position-lb css3">
            <div class="pic"><a href="#"><img src="https://uimgproxy.suning.cn/uimg1/sop/commodity/-xW4n7Zi8d61EsKY0srKyw.jpg" alt="" /></a></div>
        </div>
    </div>
    <!-- 1 -->
    <div class="cont">
        <div class="pic">
          <a href="#"><img src="https://uimgproxy.suning.cn/uimg1/sop/commodity/RsLcAA8X_Socgs8CplUg6w.jpg"/></a>
        </div>
        <a class="mask" href="#"></a>
        <div class="cont_in position-lb css3">
            <div class="pic"><a href="#"><img src="https://uimgproxy.suning.cn/uimg1/sop/commodity/RsLcAA8X_Socgs8CplUg6w.jpg" alt="" /></a></div>
        </div>
    </div>
    <!-- 1 -->
    <div class="cont">
        <div class="pic"><a href="#"><img src="https://uimgproxy.suning.cn/uimg1/sop/commodity/dy_tfTajuXq0gArsiUOpyA.jpg"/></a></div>
        <a class="mask" href="#"></a>
        <div class="cont_in position-rb css3">
            <div class="pic"><a href="#"><img src="https://uimgproxy.suning.cn/uimg1/sop/commodity/dy_tfTajuXq0gArsiUOpyA.jpg" alt="" /></a></div>
        </div>
    </div>
    <!-- 1 -->
</div>
</div>
<div class="clear"></div>

CSS代码：

```css

/* 开关灯 GO */
.m-openlight {width:950px; overflow:hidden; margin:20px auto 0; }
.m-openlight .content {width:950px; overflow:hidden; }
.m-openlight .cont { width:104px; height:104px; margin:1px 0 0 1px; float:left; display:inline; position:relative;}
.m-openlight .left { margin-left:0px;}
.m-openlight .cont .pic {width:104px; height:104px; overflow:hidden;}
.m-openlight .cont .pic img {width:104px; height:104px;  }
.m-openlight .cont .mask {display:block; width:104px; height:104px; overflow:hidden; position:absolute; left:0px; bottom:0px; background:#000000; filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0); opacity:0; }
.m-openlight .content:hover .mask {  filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0.5); opacity:0.5;}
.m-openlight .cont:hover .mask {  filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0); opacity:0;}
.m-openlight .cont .cont_in{ width:210px; height:210px; overflow:hidden; display:block; position:absolute; background:#ffffff; filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0); opacity:0; z-index:9999;
transform:scale(0); 
-webkit-transform:scale(0); 
-moz-transform:scale(0); 
-o-transform:scale(0); 
}
.m-openlight .cont .position-lt{ left:0px; top:0px; }
.m-openlight .cont .position-rt{ right:0px; top:0px; }
.m-openlight .cont .position-lb{ left:0px; bottom:0px; }
.m-openlight .cont .position-rb{ right:0px; bottom:0px;}
.m-openlight .cont:hover .cont_in{background:#ffffff; filter:progid:DXImageTransform.Microsoft.Alpha(opacity=100); opacity:1;
transform:scale(1); 
-webkit-transform:scale(1); 
-moz-transform:scale(1); 
-o-transform:scale(1); 
}
.m-openlight .cont_in .pic {width:210px; height:210px; overflow:hidden;}
.m-openlight .cont_in .pic img { width:210px; height:210px;  }

.m-openlight  .css3 {
transition:all 0.5s ease 0s;
-webkit-transition:all 0.5s ease 0s;
-moz-transition:all 0.5s ease 0s;
-o-transition:all 0.5s ease 0s;
}
/* 开关灯 END */

搞定