css实现图片信息展示

<style>
    .layui-fluid{padding: 15px;}
    .img-responsive{display: block;width: 100%;max-width: 100% ;height: auto;}
    .my-layui-btn {display: inline-block;height: 38px;line-height: 38px;padding: 0 18px;background-color: #009688;color: #fff;white-space: nowrap;text-align: center;font-size: 14px;border: none;border-radius: 2px;cursor: pointer}
    .img-responsive,.img-content,.img-data{border-radius: 3px;}
    .img-list{font-size: 18px;color: white;}
    .img-data,.img-content{transition: all 0.4s ease-out;}
    .img-content{position: relative;max-height: 250px;overflow: hidden;box-shadow: 0px 15px 30px -17px rgba(0, 0, 0, 0.44);}
    .img-content:hover{transform: scale(1.05);box-shadow: 0px 15px 30px -17px  rgba(0, 0, 0, 0.64);}
    .img-data{position: absolute;top:0;bottom: 0;left: 0;right: 0;z-index: 0;overflow: hidden;text-overflow: ellipsis;opacity: 0;}
    .img-data:hover{opacity: 1;background: rgba(1,1,1,.3);}
    .layui-btn-group{width: 100%;position: relative;}
    .next-day{position: absolute;right: 0;top:0;}
    .prev-day{position: absolute;top:0;}
    .date{box-sizing: border-box;width: 100%;background: transparent;padding: 0 80px 0 80px;}
    .tip{position: absolute;top: 0;left:-10px;transform: translateX(-110%);background: #0C0C0C;border-radius: 2px;color: white;padding: 0 10px;display: none;}
    .arrow-icon{display: block;position: absolute;right: -13px;top: 12px;border: 8px solid transparent;border-left-color: #0C0C0C;}
    .img-more-btn{width: 40px;height: 40px;border-radius: 100%;padding: 0;position: relative;}
    .layui-icon-down{display: block;transition: all .3s ease-out;}
</style>

<div class="layui-col-md3 img-info">
                                    <div class="img-content">
                                        <img src="${ctxPath}/static/img/natural1.jpg" class="img-responsive"/>
                                        <div class="img-data">
                                            2019/2/13 00:00:00
                                        </div>
                                    </div>
                                </div>
                                <div class="layui-col-md3 img-info">
                                    <div class="img-content">
                                        <img src="${ctxPath}/static/img/natural1.jpg" class="img-responsive"/>
                                        <div class="img-data">
                                            2019/2/13 00:00:00
                                        </div>
                                    </div>
                                </div>
                                <div class="layui-col-md3 img-info">
                                    <div class="img-content">
                                        <img src="${ctxPath}/static/img/natural1.jpg" class="img-responsive"/>
                                        <div class="img-data">
                                            2019/2/13 00:00:00
                                        </div>
                                    </div>
                                </div>