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

Aligning image caption area with image

本文关键字：图像 对齐 标题 区域      更新时间：2023-09-26

我在 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;

}

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

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

固定宽度：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;
}
相关文章：