Как создать галерею изображений с эффектом заголовка и зависания

Question

Я новичок в bootstrap и css, и я хочу создать галерею изображений с надписью и hover, и я не знаю, как это сделать. поэтому у меня есть Приложите изображение здесь, которое мне нужно создать точно для выполнения моей задачи, а также я попробовал код, который здесь прикрепляется.

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

Пожалуйста, проверьте демо, я обновил свой код, это то, что вам нужно?

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

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