html - CSS Overlay 悬停 View 错误的 div

Question

这是我第一次尝试覆盖。然而，它有点工作，将第一个图像悬停在下面。我尝试使位置绝对，但这意味着叠加将留在顶部。

<div class="galleryContainer">
   <div class="row">
      <div class="galleryItem">
         <img src="http://upload.wikimedia.org/wikipedia/commons/d/da/Gold-jewellery-jewel-henry-designs-terabass.jpg"/>
         <div class="imgCaption">
            <p>lulz</p>
         </div>
      </div>
      <div class="galleryItem">
         <img src="http://3.bp.blogspot.com/_HEjoNp_qRz8/TSsQZNyVFUI/AAAAAAAAJhI/xc7MCnnNYZY/s1600/World%2527s+Most+Funniest+Animals+Photos+%25288%2529.jpg"/>
         <div class="imgCaption">
            <p>lulz</p>
         </div>
      </div>
   </div>
   <div class="row">
      <div class="galleryItem">
         <img src="http://funny-pics-fun.com/wp-content/uploads/Very-Funny-And-Creative-Ads-Using-Animals-19.jpg"/>
         <div class="imgCaption">
            <p>lulz</p>
         </div>
      </div>
      <div class="galleryItem">
         <img src="http://funny-pics-fun.com/wp-content/uploads/Very-Funny-And-Creative-Ads-Using-Animals-18.jpg"/>
         <div class="imgCaption">
            <p>yaw</p>
         </div>
      </div>
   </div>
</div>

CSS:

.row {
    margin:2%;
}
.row .galleryItem {
    float: left;
    padding-right: 5%;
    width:300px;
    height:350px;
}

.row .galleryItem img {
    width:280px;
    height:330px;
    padding:0;
    margin:0;
}


.row .galleryItem .imgCaption {
    top: 0px;
    width:300px; 
    height:350px; 
    background:#FF2400; 
    opacity:0; 
}

.row .galleryItem .imgCaption p {
    color:white;
    font-weight: 400;
    font-size:16px;
    text-align: center;
}

.row .galleryItem:hover .imgCaption {
    opacity: 0.7;
}

.galleryContainer {
    margin: auto;
    max-width: 900px;
}

这是一个jsfiddle我做的证明了这个问题。任何帮助将不胜感激。

Answer 1

你的问题是你的标题位置错误。添加float:left;即可完成到你的 img。

这是一个 fiddle .

编辑:

其他变化:标题 div 没有正确淡出，所以我将显示方法从 opacity:0 切换为-> opacity: 0.7; , 至 display:none -> display: block .

我从 <p> 中删除了边距和填充元素，因为它出现位移。