您所在的位置:首页>建站素材
  • 建站素材

纯css实现图片不规则布局点击变亮效果

作者:admin    时间:2019-11-11 11:52:29    人气:11   

html代码:

<div class="layout">
    <div class="cols1 cols">
        <div class="pic"><a href="http://www.17sucai.com/"><img src="images/ph_03.jpg" width="320" height="430" /><div class="black"></div></a></div>
    </div>
    <div class="cols2 cols">
        <div class="pic"><a href="http://www.17sucai.com/"><img src="images/ph_05.jpg" width="140" height="140" /><div class="black"></div></a></div>
        <div class="pic"><a href="http://www.17sucai.com/"><img src="images/ph_05.jpg" width="140" height="140" /><div class="black"></div></a></div>
        <div class="pic"><a href="http://www.17sucai.com/"><img src="images/ph_05.jpg" width="140" height="140" /><div class="black"></div></a></div>
    </div>
    <div class="cols3 cols">
        <div class="pic h185"><a href="http://www.17sucai.com/"><img src="images/ph_07.jpg" width="320" height="185" /><div class="black"></div></a></div>
        <div class="pic h185"><a href="http://www.17sucai.com/"><img src="images/ph_09.jpg" width="185" height="185" /><div class="black"></div></a></div>
        <div class="pic h240"><a href="http://www.17sucai.com/"><img src="images/ph_14.jpg" width="265" height="240" /><div class="black"></div></a></div>
        <div class="pic h240"><a href="http://www.17sucai.com/"><img src="images/ph_16.jpg" width="240" height="240" /><div class="black"></div></a></div>
    </div>
</div>

css代码:

.layout{width:985px;height:430px;margin:30px auto;}
div.cols{float:left;margin-right:5px;display:inline;height:430px;overflow:hidden;}
div.cols .pic{float:left;position:relative;}
div.cols .pic .black{cursor:pointer;width:100%;position:absolute;left:0;top:0;background-color:#000;opacity:0.5;-moz-opacity:0.5;filter:alpha(opacity=50);}
div.cols1{width:320px;}
div.cols2{width:140px;}
div.cols3{width:515px;margin:0;}
div.cols2 .pic{margin-bottom:5px;}
div.cols3 .pic{margin:0 5px 5px 0;}
div.cols1 .pic .black{height:430px;}
div.cols2 .pic .black{height:140px;}
div.cols3 .h185 .black{height:185px;}
div.cols3 .h240 .black{height:240px;}
div.cols .pic a:hover .black{opacity:0;-moz-opacity:0;filter:alpha(opacity=0);}

效果预览:

1573444529193645.png

点击下载:不规则布局点击变亮.rar


标签:模板网站,建站素材
  • 热卖模板
  • 最新资讯
PBOOTCMS模板网 - 成功的竞争者应该经得起风雨,应该具有抗挫折的能力。在竞争中流泪是弱者,只有在困境中奋起,才能成为强者。

推荐模板

PBOOTCMS模板网 - 致力于PBOOTCMS模板开发,模板定制,公司网站模板制作,欢迎有共同爱好的朋友相互交流!

友情链接