Bootstrap Make Image Hover Caption Responsive

Question

<div class="row"> 

     <div class="container-a1"> 
     <ul class="caption-style-1"> 
      <li class="col-lg-3 col-sm-3 portfolio-item"> 
       <img class="img-responsive" src="img/1.png" alt=""> 
       <div class="caption"> 
        <div class="blur"></div> 
        <div class="caption-text"> 
         <h1>Amazing Caption</h1> 
         <p>Whatever It Is - Always Awesome</p> 
        </div> 
       </div> 
      </li> 
      <li class="col-lg-3 col-sm-3 portfolio-item"> 
       <img class="img-responsive" src="img/1.png" alt=""> 
       <div class="caption"> 
        <div class="blur"></div> 
        <div class="caption-text"> 
         <h1>Amazing Caption</h1> 
         <p>Whatever It Is - Always Awesome</p> 
        </div> 
       </div> 
      </li> 
      <li class="col-lg-3 col-sm-3 portfolio-item"> 
       <img class="img-responsive" src="img/1.png" alt=""> 
       <div class="caption"> 
        <div class="blur"></div> 
        <div class="caption-text"> 
         <h1>Amazing Caption</h1> 
         <p>Whatever It Is - Always Awesome</p> 
        </div> 
       </div> 
      </li> 
      <li class="col-lg-3 col-sm-3 portfolio-item"> 
       <img class="img-responsive" src="img/1.png" alt=""> 
       <div class="caption"> 
        <div class="blur"></div> 
        <div class="caption-text"> 
         <h1>Amazing Caption</h1> 
         <p>Whatever It Is - Always Awesome</p> 
        </div> 
       </div> 
      </li> 
      </ul> 
     </div> 

     </div> 


<style> 
     .portfolio-item {margin:0; padding:0;} 

      .caption-style-1{ 
     list-style-type: none; 
     margin: 0px; 
     padding: 0px; 

    } 

    .caption-style-1 li{ 
     float: left; 
     padding: 0px; 
     position: relative; 
     overflow: hidden; 
    } 

    .caption-style-1 li:hover .caption{ 
     opacity: 1; 

    } 


    .caption-style-1 img{ 
     margin: 0px; 
     padding: 0px; 
     float: left; 
     z-index: 4; 
    } 


    .caption-style-1 .caption{ 
     cursor: pointer; 
     position: absolute; 
     opacity: 0; 
     -webkit-transition:all 0.45s ease-in-out; 
     -moz-transition:all 0.45s ease-in-out; 
     -o-transition:all 0.45s ease-in-out; 
     -ms-transition:all 0.45s ease-in-out; 
     transition:all 0.45s ease-in-out; 

    } 
    .caption-style-1 .blur{ 
     background-color: rgba(0,0,0,0.65); 
     height: 175px; 
     width: 292px; 
     z-index: 5; 
     position: absolute; 
    } 

    .caption-style-1 .caption-text h1{ 
     text-transform: uppercase; 
     font-size: 24px; 
    } 
    .caption-style-1 .caption-text{ 
     z-index: 10; 
     color: #fff; 
     position: absolute; 
     width: 293px; 
     height: 176px; 
     text-align: center; 

    } 



    </style> 

我將懸停標題的教程轉換爲bootstrap。問題是網格樣式組合是響應式的，我似乎無法讓標題響應。我嘗試將高度和寬度設置爲100％，但這不起作用？有小費嗎？

Answer 1

Velibor Nikolic你好。
您正在使用div在ul > li這不是一個好主意。
看看這個link here。

請嘗試採用類似於此操作的方法來處理標題。 查看此工作示例的此Fiddle。

這是充分響應，圖像和標題。
我使用col-xs-12的Bootstrap class作爲寬度，標題class使用height:100%。

我減少了一些classes並將陰影背景添加到標題class，不需要模糊class。

下面是帶有標題的一個圖像塊的示例。

<div class="col-sm-4 col-xs-12 clear-L-R"> 
    <img src="http://lorempixel.com/640/640/nature" class="img-responsive clear-L-R" alt=""> 
    <div class="col-xs-12 caption caption-text"> 
      <h1>Amazing Caption</h1> 
      <p>Whatever It Is - Always Awesome</p> 
     </div> 
</div>