html - 画廊图片上的字幕问题

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;
}