將圖像標題區域與圖像對齊

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> 

我想要的圖像懸停，讓它蹦出來的能力，顯示其下方的標題區域，顯示額外的PVC門。彈出窗口可以正常工作，但下面的標題不能排列。這似乎與它的立場是絕對的事實有關。這些是被應用這種效果的相關樣式規則是

.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％的寬度，而不是實際的圖像寬度。我刪除了不相關的角色，並創建了一個快速的小提示來展示我認爲你在追求的內容。

固定寬度：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; 
}