如何创建带有标题和悬停效果的图库

Question

我是bootstrap和css的新手，我想创建带有标题和悬停的图片库，我不知道该怎么做。所以我在这里附加图片，我需要完全创建以完成我的任务，并且我还尝试了附加在这里的代码。

please help me to create it

image

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;
}

Answer 1

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

＆＃13;

＆＃13;

p {
	margin:0;
}
.product-wrapper {
	position: relative;
	overflow: hidden;
	float: left;
	width: 100%;
	height: auto;
	background-color: #fff;
	border-radius: 2px;
	box-shadow: 0px 0px 5px 1px #5e5e5e;
	z-index: 198;
	margin:11px 0;
}
.product-wrapper .caption {
	position: absolute;
	display: block;
	width: 100%;
	padding: 15px 3%;
	left: 0;
	top: 0;
	line-height: 18px;
	font-size: 11px;
	color: #eee;
	background: #42B32F;
	z-index: 199;
	text-align:center;
}
.product-wrapper img , .thumb a , .thumb a img {
	width:100%;
}
.product-wrapper img {
	display:block;
	position:relative;
	-webkit-transition:all .4s linear;
	transition:all .4s linear;
}
.product-wrapper:hover img {
	-ms-transform:scale(1.2);
	-webkit-transform:scale(1.2);
	transform:scale(1.2);
}

＆＃13;

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<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="https://images2.alphacoders.com/303/thumb-1920-30312.jpg" 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="product-wrapper">
    <div class="thumb"> <a href="#" target="_blank"> <img src="https://images2.alphacoders.com/303/thumb-1920-30312.jpg" 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="product-wrapper">
    <div class="thumb"> <a href="#" target="_blank"> <img src="https://images2.alphacoders.com/303/thumb-1920-30312.jpg" 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="product-wrapper">
    <div class="thumb"> <a href="#" target="_blank"> <img src="https://images2.alphacoders.com/303/thumb-1920-30312.jpg" alt=""> </a> </div>
    <div class="caption">
      <p>H.D.P.E pipes</p>
    </div>
  </div>
</div>

</div>
</div>

＆＃13;

＆＃13;

＆＃13;