Html 如何创建具有标题和悬停效果的图像库

我在引导和css方面是新手，我想创建带有标题和悬停的图像库，但我不知道怎么做。因此，我有附加图像在这里，我需要准确地创建它来完成我的任务，而且我还尝试了附加在这里的代码

please help me to create it

HTML代码：

 <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                <div class="container">
                    <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
                        <div class="product-wrapper">
                            <div class="thumb">
                                <a href="#" target="_blank">
                                    <img src="images/product1.png" alt="">
                                </a>
                            </div>

                            <div class="caption">
                                <p>H.D.P.E pipes</p>
                             </div>
                        </div>
                    </div>

                    <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
                        <div class="">
                            <a href="#" target="_blank">
                                <img src="images/product2.png" alt="">
                                <div class="caption">
                                    <p>H.D.P.E pipes</p>
                                </div>
                            </a>
                        </div>
                    </div>

                    <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
                        <div class="">
                            <a href="#" target="_blank">
                                <img src="images/product3.png" alt="">
                                <div class="caption">
                                    <p>H.D.P.E pipes</p>
                                </div>
                            </a>
                        </div>
                    </div>

                    <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
                        <div class="">
                            <a href="#" target="_blank">
                                <img src="images/product4.png" alt="">
                                <div class="caption">
                                    <p>H.D.P.E pipes</p>
                                </div>
                            </a>
                        </div>
                    </div>

CSS:

.product-wrapper
{
    position: relative;
    overflow: hidden;
    float: left;
    width:auto;
    height:auto;
    background-color: #fff;
    border-radius: 2px;
    box-shadow: 0px 0px 5px 1px #5e5e5e;
    z-index: 198;
}
.product-wrapper .caption
{
    position: absolute;
    display: block;
    width: 100%;
    padding: 0 3%;
    left: 0;
    top: 0;
    height: 18px;
    line-height: 18px;
    font-size: 11px;
    color: #eee;
    background: #42B32F;
    z-index: 199;
}

高压聚乙烯管

CSS:
.产品包装
{
位置：相对位置；
溢出：隐藏；
浮动：左；
宽度：自动；
高度：自动；
背景色：#fff；
边界半径：2px；
盒影：0px 0px 5px 1px#5e5e；
z指数：198；
}
.产品包装.说明
{
位置：绝对位置；
显示：块；
宽度：100%；
填充：0.3%；
左：0；
排名：0；
高度：18px；
线高：18px；
字体大小：11px；
颜色：#eee；
背景：#42B32F；
z指数：199；
}

请查看演示，我已经更新了您的代码，这是您需要的吗

p{
保证金：0；
}
.产品包装{
位置：相对位置；
溢出：隐藏；
浮动：左；
宽度：100%；
高度：自动；
背景色：#fff；
边界半径：2px；
盒影：0px 0px 5px 1px#5e5e；
z指数：198；
利润率：11px0；
}
.产品包装.说明{
位置：绝对位置；
显示：块；
宽度：100%；
填充：15px 3%；
左：0；
排名：0；
线高：18px；
字体大小：11px；
颜色：#eee；
背景：#42B32F；
z指数：199；
文本对齐：居中；
}
.产品包装img、.thumb a、.thumb a img{
宽度：100%；
}
.产品包装img{
显示：块；
位置：相对位置；
-webkit转换：所有.4s线性；
过渡：全部。4s线性；
}
.产品包装：悬停式img{
-ms变换：比例（1.2）；
-webkit转换：规模（1.2）；
转换：比例（1.2）；
}

高压聚乙烯管

高压聚乙烯管

高压聚乙烯管

高压聚乙烯管

编辑您的答案，我不明白，图像在哪里？密码呢？也许是一杯鸡尾酒？这是我想创建的与此图像相同的图像链接（参考Img），此问题没有附带任何图像。但是，如果您正在查找标题为this（）的图像库可能会对你有所帮助。如果这不是你想要的，那么请编辑问题。你可以制作JSFIDLE以便我们可以查看它吗？这是我尝试过的，但没有效果