Issue with captions over gallery images

Question

My site: http://www.lotusroomofboca.com/menu.html

I finally got the mouseover to work to show the green color below, but the text captions I put over the images show awkwardly on hover. I want them to show up WITH the green fade. Also, the fade doesn't work if you hover on the captions..

@Trevor here is all the CSS for this gallery:

.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

Try:

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

Update 2 Try:

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