javascript - 将图像标题区域与图像对齐

Question

我在 Angular 中有一个组件，它在四列网格中将产品集合显示为图像。

<div class="row" ng-repeat="product in products track by $index" ng-if="$index % 4 == 0">
<div class="col-sm-3 title-box-sm" ng-repeat="i in [$index, $index + 1, $index + 2, $index + 3]" ng-if="products[i] != null" ng-class="{hover: hover}" ng-mouseenter="hover = true" ng-mouseleave="hover = false">
    <a href="{{ products[i].url }}">
        <img alt="{{ products[i].alt }}" ng-src="{{ products[i].image_url }}"/>
        <div class="image-caption">
            {{ products[i].name }}
        </div>
    </a>
</div>

我希望能够将鼠标悬停在图像上并弹出图像，在图像下方显示一个显示附加信息的标题区域。弹出效果很好，但它下面的标题没有对齐。这似乎与它的位置是绝对的事实有关。这些是应用于此效果的相关样式规则是

.title-box-sm.hover {
-moz-transform: scale(1.03);
-o-transform: scale(1.03);
-webkit-transform: scale(1.03);
transform: scale(1.03);
z-index: 600;

.title-box-sm.hover .image-caption {
display: block;
position: absolute;
background: white;
width: 100%;
line-height: 3.4em;

但它没有在右侧正确排列，添加到图像标题的任何填充都会进一步将其推出。它需要是一个绝对位置，这样当鼠标悬停在上面时它就不会压低其他所有东西。无论我如何设置图像标题容器的样式，如何使标题始终与图像的左右对齐？很抱歉，如果这个问题已经得到解答，我找不到相关文章。

Answer 1

这可能是因为您的 CSS 设置为使标题 100% 宽度，而不是实际图像宽度。我去掉了棱 Angular 分明的东西，因为它不相关，并创建了一个快速 fiddle 来展示我认为你想要的东西。

固定宽度:https://jsfiddle.net/w3nc95dg/ 流体宽度:https://jsfiddle.net/w3nc95dg/4/

我所做的 CSS 更改:

.title-box-sm:hover {
-moz-transform: scale(1.03);
-o-transform: scale(1.03);
-webkit-transform: scale(1.03);
transform: scale(1.03);
z-index: 600;
}

.title-box-sm .image-caption {
display: none;
position: absolute;
text-align:center;
background: #66ffff;
/*width: 100px;*/
left: 15px;
right: 15px;
line-height: 3.4em;
}

.title-box-sm:hover .image-caption {
display: block;
}