css3响应式图片网格布局

下载地址： http://www./css3/css3donghua/20141104382.html

简要教程

这个网格布局效果中每行的图片数量会根据屏幕的宽度自动调整，并在鼠标滑过时带有一些文本动画效果。

HTML

<ul class="cbp-ig-grid">

    <li>

        <a href="#">

            <span class="cbp-ig-icon cbp-ig-icon-shoe"></span>

            <h3 class="cbp-ig-title">Squid voluptate</h3>

            <span class="cbp-ig-category">Fashion</span>

        </a>

    </li>

    <li>

        <a href="#">

            <span class="cbp-ig-icon cbp-ig-icon-ribbon"></span>

            <h3 class="cbp-ig-title">Mixtape lo-fi</h3>

            <span class="cbp-ig-category">Design</span>

        </a>

    </li>

    <li>

        <a href="#">

            <span class="cbp-ig-icon cbp-ig-icon-milk"></span>

            <h3 class="cbp-ig-title">Cosby sweater</h3>

            <span class="cbp-ig-category">Lifestyle</span>

        </a>

    </li>

    <li>

        <a href="#">

            <span class="cbp-ig-icon cbp-ig-icon-whippy"></span>

            <h3 class="cbp-ig-title">Commodo</h3>

            <span class="cbp-ig-category">Food</span>

        </a>

    </li>

    <li>

        <a href="#">

            <span class="cbp-ig-icon cbp-ig-icon-spectacles"></span>

            <h3 class="cbp-ig-title">Bitters kitsch</h3>

            <span class="cbp-ig-category">Gadgets</span>

        </a>

    </li>

    <li>

        <a href="#">

            <span class="cbp-ig-icon cbp-ig-icon-doumbek"></span>

            <h3 class="cbp-ig-title">Austin proident</h3>

            <span class="cbp-ig-category">Music</span>

        </a>

    </li>

</ul>