SOURCE

<!-- 1. 一行 2 个，支持每行 1-6 个，改下面的 col-2 就行了 -->
<div class="m-imgtxt">
    <ul class="block col-2">
        <li class="item">
            <div class="inner">
                <a href="">
                    <div class="imgtxt-mask"><img src="http://pic.celong.cn/uploads/ueditor/2018-05-09/15258357987.png" alt="" /></div>
                    <img src="http://pic.celong.cn/uploads/ueditor/2018-05-09/15258356144.jpg" alt="" class="imgtxt-pic" />
                </a>
                <div class="desc">
                    <div class="desc-inner">支持每行 1-6 个，改里面的 col-2 就行了</div>
                </div>
            </div>
        </li>
        <li class="item">
            <div class="inner">
                <a href="">
                    <div class="imgtxt-mask" style="bottom: 0; padding: 0 5px; width: 100%; height: 24px; font-size: 12px; line-height: 24px; background: rgba(255, 255, 255, .5); color: #fff;">
                        <span>可以按照需要来改变 mask 的位置和样式</span>
                    </div>
                    <img src="http://pic.celong.cn/uploads/ueditor/2018-05-09/15258356144.jpg" alt="" class="imgtxt-pic" />
                </a>
                <div class="desc">
                    <div class="desc-inner">

                        <!-- 测试代码，可以替换成自己的 -->
                        <a href="" style="float: right; padding: 0 20px; color: #fff; background: #f60;">抢购</a>
                        <div style="line-height: 2; color: #f60; font-size: 16px;">￥699.00 <span style="color: #999; font-size: 12px; text-decoration: line-through;">￥999.00</span></div>

                    </div>
                </div>
            </div>
        </li>
        <li class="item">
            <div class="inner">
                <a href="">
                    <div class="imgtxt-mask"><img src="http://pic.celong.cn/uploads/ueditor/2018-05-09/15258357987.png" alt="" /></div>
                    <img src="http://pic.celong.cn/uploads/ueditor/2018-05-09/15258356144.jpg" alt="" class="imgtxt-pic" />
                </a>
                <div class="desc">
                    <div class="desc-inner">文本区域</div>
                </div>
            </div>
        </li>
        <li class="item">
            <div class="inner">
                <a href="">
                    <div class="imgtxt-mask"><img src="http://pic.celong.cn/uploads/ueditor/2018-05-09/15258357987.png" alt="" /></div>
                    <img src="http://pic.celong.cn/uploads/ueditor/2018-05-09/15258356144.jpg" alt="" class="imgtxt-pic" />
                </a>
                <div class="desc">
                    <div class="desc-inner">文本区域</div>
                </div>
            </div>
        </li>
    </ul>
</div>



<!-- 2. 只有图片 -->
<div class="m-imgtxt">
    <ul class="block col-4">
        <li class="item">
            <div class="inner">
                <a href="">
                    <div class="imgtxt-mask"><img src="http://pic.celong.cn/uploads/ueditor/2018-05-09/15258357987.png" alt="" /></div>
                    <img src="http://pic.celong.cn/uploads/ueditor/2018-05-09/15258356144.jpg" alt="" class="imgtxt-pic" />
                </a>
            </div>
        </li>
        <li class="item">
            <div class="inner">
                <a href="">
                    <div class="imgtxt-mask" style="bottom: 0; padding: 0 5px; width: 100%; height: 24px; font-size: 12px; line-height: 24px; background: rgba(255, 255, 255, .5); color: #fff;">
                        <span>可以按照需要来改变 mask 的位置和样式</span>
                    </div>
                    <img src="http://pic.celong.cn/uploads/ueditor/2018-05-09/15258356144.jpg" alt="" class="imgtxt-pic" />
                </a>
            </div>
        </li>
        <li class="item">
            <div class="inner">
                <a href="">
                    <div class="imgtxt-mask"><img src="http://pic.celong.cn/uploads/ueditor/2018-05-09/15258357987.png" alt="" /></div>
                    <img src="http://pic.celong.cn/uploads/ueditor/2018-05-09/15258356144.jpg" alt="" class="imgtxt-pic" />
                </a>
            </div>
        </li>
        <li class="item">
            <div class="inner">
                <a href="">
                    <div class="imgtxt-mask"><img src="http://pic.celong.cn/uploads/ueditor/2018-05-09/15258357987.png" alt="" /></div>
                    <img src="http://pic.celong.cn/uploads/ueditor/2018-05-09/15258356144.jpg" alt="" class="imgtxt-pic" />
                </a>
            </div>
        </li>
    </ul>
</div>



<!-- 3. 左右布局，并且可以和 col-* 搭配 -->
<div class="m-imgtxt layout2">
    <ul class="block col-1">
        <li class="item">
            <div class="inner">
                <a href="">
                    <div class="imgtxt-mask"><img src="http://pic.celong.cn/uploads/ueditor/2018-05-09/15258357987.png" alt="" /></div>
                    <img src="http://pic.celong.cn/uploads/ueditor/2018-05-09/15258356144.jpg" alt="" class="imgtxt-pic" />
                </a>
                <div class="desc">
                    <div class="desc-inner">支持左右布局，左图右文或者右图左文</div>
                </div>
            </div>
        </li>
        <li class="item">
            <div class="inner">
                <a href="">
                    <div class="imgtxt-mask" style="bottom: 0; padding: 0 5px; width: 100%; height: 24px; font-size: 12px; line-height: 24px; background: rgba(255, 255, 255, .5); color: #fff;">
                        <span>可以按照需要来改变 mask 的位置和样式</span>
                    </div>
                    <img src="http://pic.celong.cn/uploads/ueditor/2018-05-09/15258356144.jpg" alt="" class="imgtxt-pic" />
                </a>
                <div class="desc">
                    <div class="desc-inner">

                        <!-- 测试代码，可以替换成自己的 -->
                        <a href="" style="float: right; padding: 0 20px; color: #fff; background: #f60;">抢购</a>
                        <div style="line-height: 2; color: #f60; font-size: 16px;">￥699.00 <span style="color: #999; font-size: 12px; text-decoration: line-through;">￥999.00</span></div>

                    </div>
                </div>
            </div>
        </li>
        <li class="item">
            <div class="inner">
                <a href="">
                    <div class="imgtxt-mask"><img src="http://pic.celong.cn/uploads/ueditor/2018-05-09/15258357987.png" alt="" /></div>
                    <img src="http://pic.celong.cn/uploads/ueditor/2018-05-09/15258356144.jpg" alt="" class="imgtxt-pic" />
                </a>
                <div class="desc">
                    <div class="desc-inner">文本区域</div>
                </div>
            </div>
        </li>
        <li class="item">
            <div class="inner">
                <a href="">
                    <div class="imgtxt-mask"><img src="http://pic.celong.cn/uploads/ueditor/2018-05-09/15258357987.png" alt="" /></div>
                    <img src="http://pic.celong.cn/uploads/ueditor/2018-05-09/15258356144.jpg" alt="" class="imgtxt-pic" />
                </a>
                <div class="desc">
                    <div class="desc-inner">文本区域</div>
                </div>
            </div>
        </li>
    </ul>
</div>



<!-- 4. 左右布局，图片在右边，并且可以和 col-* 搭配 -->
<div class="m-imgtxt layout2 layout3">
    <ul class="block col-1">
        <li class="item">
            <div class="inner">
                <a href="">
                    <div class="imgtxt-mask"><img src="http://pic.celong.cn/uploads/ueditor/2018-05-09/15258357987.png" alt="" /></div>
                    <img src="http://pic.celong.cn/uploads/ueditor/2018-05-09/15258356144.jpg" alt="" class="imgtxt-pic" />
                </a>
                <div class="desc">
                    <div class="desc-inner">文本区域</div>
                </div>
            </div>
        </li>
        <li class="item">
            <div class="inner">
                <a href="">
                    <div class="imgtxt-mask" style="bottom: 0; padding: 0 5px; width: 100%; height: 24px; font-size: 12px; line-height: 24px; background: rgba(255, 255, 255, .5); color: #fff;">
                        <span>可以按照需要来改变 mask 的位置和样式</span>
                    </div>
                    <img src="http://pic.celong.cn/uploads/ueditor/2018-05-09/15258356144.jpg" alt="" class="imgtxt-pic" />
                </a>
                <div class="desc">
                    <div class="desc-inner">

                        <!-- 测试代码，可以替换成自己的 -->
                        <a href="" style="float: right; padding: 0 20px; color: #fff; background: #f60;">抢购</a>
                        <div style="line-height: 2; color: #f60; font-size: 16px;">￥699.00 <span style="color: #999; font-size: 12px; text-decoration: line-through;">￥999.00</span></div>

                    </div>
                </div>
            </div>
        </li>
        <li class="item">
            <div class="inner">
                <a href="">
                    <div class="imgtxt-mask"><img src="http://pic.celong.cn/uploads/ueditor/2018-05-09/15258357987.png" alt="" /></div>
                    <img src="http://pic.celong.cn/uploads/ueditor/2018-05-09/15258356144.jpg" alt="" class="imgtxt-pic" />
                </a>
                <div class="desc">
                    <div class="desc-inner">文本区域</div>
                </div>
            </div>
        </li>
        <li class="item">
            <div class="inner">
                <a href="">
                    <div class="imgtxt-mask"><img src="http://pic.celong.cn/uploads/ueditor/2018-05-09/15258357987.png" alt="" /></div>
                    <img src="http://pic.celong.cn/uploads/ueditor/2018-05-09/15258356144.jpg" alt="" class="imgtxt-pic" />
                </a>
                <div class="desc">
                    <div class="desc-inner">文本区域</div>
                </div>
            </div>
        </li>
    </ul>
</div>

/* 最外层 */
.m-imgtxt { overflow: hidden; position: relative; margin: 20px; padding: 20px; background: #fff; border: 1px solid #999; font-size: 14px; color: #fff; }
    /* 列表 */
    .m-imgtxt > .block { overflow: hidden; margin: -10px -10px 0 0; padding: 0; }
        .m-imgtxt > .block > .item { float: left; margin: 0; padding: 0; -webkit-transition: all .3s; transition: all .3s; }
        .m-imgtxt > .col-1 > .item { float: none; }
        .m-imgtxt > .col-2 > .item { width: 50%; }
        .m-imgtxt > .col-3 > .item { width: 33.3333%; }
        .m-imgtxt > .col-4 > .item { width: 25%; }
        .m-imgtxt > .col-5 > .item { width: 20%; }
        .m-imgtxt > .col-6 > .item { width: 16.6667%; }
            /* 单个 */
            .m-imgtxt .inner { margin: 10px 10px 0 0; }
                .m-imgtxt .inner > a { overflow: hidden; position: relative; display: block; border: 1px solid #000; }
                /* 按照图片高宽比例来改 padding-top 的值 */
                .m-imgtxt .inner > a:after { content: ''; display: block; padding-top: 48%; }
                /* 图片区域 */
                .m-imgtxt .imgtxt-pic, .m-imgtxt .imgtxt-mask { position: absolute; -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0); }
                    .m-imgtxt .imgtxt-pic { width: 100%; }
                    .m-imgtxt > .block > .item:hover .imgtxt-pic { -moz-transform: scale(1.08) translate3d(0,0,0); -ms-transform: scale(1.08); -webkit-transform: scale(1.08) translate3d(0,0,0); transform: scale(1.08) translate3d(0,0,0); }
                    .m-imgtxt .imgtxt-mask { z-index: 1; width: 50px; height: 50px; }
                        .m-imgtxt .imgtxt-mask > img { width: 100%; height: 100%; }
                /* 文本区域 */
                .m-imgtxt .inner .desc { padding: 10px 0; width: 100%; color: #444; }
                    .m-imgtxt .inner .desc-inner { overflow: hidden; height: 30px; line-height: 30px; }
/* 左图右文 */
.m-imgtxt.layout2 > .block > .item { min-height: 60px; }
    .m-imgtxt.layout2 .inner { position: relative; padding-left: 110px; }
        .m-imgtxt.layout2 .inner > a { position: absolute; margin-left: -110px; width: 100px; }
        .m-imgtxt.layout2 .inner .desc { padding: 0; }
    /* 右图左文，配合 layout2 用 */
    .m-imgtxt.layout3 > .block { margin-right: 0; }
    .m-imgtxt.layout3 .inner { padding-left: 0; padding-right: 110px; }
        .m-imgtxt.layout3 .inner > a { right: 100px; margin-right: -110px; }