キャプションとホバー効果で画像ギャラリーを作成するには

Question

私はブートストラップと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

デモを確認してください、私はあなたのコードを更新している、これは何が必要でしょうか？

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>