【css】css图片廊

思路：利用左浮动进行排列，设置hover效果，动画自设。浮动清除使用伪元素after
css:

            .responsive {
                float: left;
                padding: 0 6px;
                width: 24%;
                margin: 10px auto;
            }
            /*响应式设置*/
            @media only screen and (max-width: 700px) {
                .responsive {
                    width: 49%;
                    margin: 6px 0;
                }
            }

            @media only screen and (max-width: 500px) {
                .responsive {
                    width: 100%;
                    margin: 6px 0;
                }
            }

            .simg {
                border: 1px solid #CCCCCC;
            }

            .simg:hover {
                border: 1px solid #777;
            }

            .simg img {
                width: 100%;
                height: auto;
            }           
            .desc {
                padding: 15px;
                text-align: center;
            }
            /*浮动清除*/
            .clearfix::after {
                content: "";
                display: table;
                clear: both;
            }

html:

        <div class="responsive">
            <div class="simg">
                <a target="_blank" href="img_fjords.jpg">
                    <img src="http://www.runoob.com/wp-content/uploads/2016/04/img_fjords.jpg" alt="Trolltunga Norway" width="300" height="200">
                </a>

                <div class="desc">
                    Add a description of the image here
                </div>
            </div>
        </div>
        <div class="clearfix"></div>

        <div style="padding:6px;">

            <h4>重置浏览器大小查看效果</h4>
        </div>

图像透明度-opacity

img
{
  opacity:0.4;
  filter:alpha(opacity=40); /*  IE8 及其更早版本 */
}
img:hover
{
  opacity:1.0;
  filter:alpha(opacity=100); /* IE8 及其更早版本 */
}

总结：浮动的清除。浮动造成的影响。

原文：http://www.runoob.com/try/try.php?filename=trycss_image_gallery_responsive