html - Figcaption 动画问题

Question

fiddle :http://jsfiddle.net/dXd26/

代码:

HTML:

<div class="container">
<div class="row">
    <figure class="col-sm-6 item"> 

        <a href="item.html"><img src="http://placehold.it/720x480&text=720x480+Game" class="img-responsive center-block" alt="Game"></a>

        <!-- Item Hover Options -->
        <figcaption>
            <!-- Item Title -->
             <h2>Item Title</h2>

            <!-- Item Description -->
            <p>Item Description</p>
            <!-- Item Progress -->
            <div class="progress progress-striped">
                <div class="progress-bar progress-bar-default" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%"> <span class="sr-only">20% Complete</span>

                </div>
                <!-- END progress bar -->
            </div>
            <!-- END progress div -->
        </figcaption>
    </figure>
    <!-- END item title figure -->
</div>

问题是悬停时显示的标题比图像略宽。

我怎样才能修复它，使标题的宽度在所有设备上都是正确的？

Answer 1

尝试像这样编辑您的 CSS(移除宽度 100% 并更改左/右)。

figcaption {
  ...
  /* left: 0;
  width: 100%; */
  left: 15px;
  right: 15px;
  ...
}

jsfiddle