引导字幕越过图像

Question

<div class="container"> 
<style>

       .spacer {
  margin-top: 2%;
  margin-bottom: 2%;
}    

.clear-L-R {   
    padding-left:0px;
    padding-right: 0px;
}     


.caption{
    cursor: pointer;
    position: absolute;
    top:0;
    height:100%;
    background-color: rgba(0,0,0,0.65);
    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:hover{
    opacity: 1;
}
.caption-text h1{
    text-transform: uppercase;
    font-size: 24px;
}
.caption-text{
    color: #fff;
    text-align: center;
}   

       </style>

       <div class="container col-lg-12 spacer"></div>

<div class="container col-lg-12">

      <div class="row-fluid">

        <div class="col-sm-12 col-lg-6">

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

            </div>
        </div>

        <div class="col-sm-12 col-lg-6">

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


</div><!--END row-->  

I am trying to make the caption responsive and only fill the width of the image, but it is taking about the size of the padding. Tried a few fixes nothing seems to work. The gray part is where the caption goes over.

Answer 1

Your caption is absolutely positioned relative to the col-sm-12 col-lg-6 div , which has padding on the left and right. One option to get the display you are looking for is to put the caption into a separate relatively positioned div . See this bootply which gives an example.