问题与字幕在画廊图像

Question

我的网站： http://www.lotusroomofboca.com/menu.html

我终于拿到了鼠标悬停工作，以显示下面的绿色，但是文本字幕，我把在图像显示笨拙悬停。我希望他们出现绿色的淡入淡出。另外，如果你将鼠标悬停在字幕淡入淡出不起作用..

@Trevor这里是所有这个画廊的CSS：

.floated_img {float:left; 
       width:210px; 
        height:144px; 
        margin-right:15px; 
        margin-bottom:15px; 
        background-color:#7b8c6f; 
        text-align:center; 
       } 

.floated_img img {width:210px; 
        height:144px; 
        margin-right:15px; 
        margin-bottom:15px; 
        background-color:#7b8c6f; 
        position:absolute 
        } 

.floated_img img:hover {-moz-opacity:0.15; 
         -khtml-opacity: 0.15; 
         opacity: 0.15; 
         transition-duration:0.5s;} 

.caption p { 
    font-family: 'Avenir'; 
    font-size: 15px; 

} 


.caption { 
    z-index: 1000; 
    color: white; 
    text-align: center; 
    position: absolute; 
    top: 25%; 
    margin: auto; 
    display: none; 
    pointer-events: none; 
}   

.floated_img:hover .caption {z-index:10000; 
      color:white; 
      text-align:center; 
      position:relative; 
      margin:auto; 
      display:block;} 

Answer 1

尝试：

.caption p { 
    font-family: 'Avenir'; 
    font-size: 15px; 
    opacity: .6; // makes a little of the green color go through 
} 


.caption { 
    z-index: 1000; 
    color: white; 
    text-align: center; 
    position: absolute; 
    top: 25%; 
    margin: auto; 
    display: none; 
    pointer-events: none; // new makes it so the caption does not interfere with hover 
} 

更新2尝试：

.caption { 
    z-index: 1000; 
    color: white; 
    text-align: center; 
    position: relative; //new 
    top: 25%; 
    margin: auto; 
    pointer-events: none; 
    display: block; 
    opacity: 0; 
    transition: opacity .5s; 
    -webkit-transition: opacity .5s; 
}   

.floated_img:hover > .caption {z-index:10000; 
      color:white; 
      text-align:center; 
      position:relative; 
      margin:auto; 
      opacity: 1; 
}