在图像叠加层上创建标题

Question

I am trying to make it so when a mouse hovers over an image it displays a caption and a blue background. The effect I am trying to replicate can be found on any image at http://adamginther.com/gradshow/students.php , I am trying to take this effect to the images i Samples on http://adamginther.com/gradshow/students/adam-ginther.php . Thanks!

<div id="samples">
            <h6 class="title">Samples</h5>

            <div class="work-image">
                <a href="http://adamginther.com/work04.php" target="_blank">
                    <img src="../images/samples/adam-1.jpg" alt="Intestellar">
                    <span class="overlay-caption">
                        Test
                    </span>
                </a>
            <div class="corner corner-tl"></div>
            <div class="corner corner-tr"></div>
            <div class="corner corner-bl"></div>
            <div class="corner corner-br"></div>
        </div>
        <div class="work-image">
            <a href="http://adamginther.com/work01.php" target="_blank">
                <img src="../images/samples/adam-2.jpg" alt="SPUD">
                <span class="overlay-caption">
                    Test
                </span>
            </a>
            <div class="corner corner-tl"></div>
            <div class="corner corner-tr"></div>
            <div class="corner corner-bl"></div>
            <div class="corner corner-br"></div>
        </div>
        <div class="work-image">
            <a href="http://adamginther.com/work03.php" target="_blank">
                <img src="../images/samples/adam-3.jpg" alt="Work01">
                <span class="overlay-caption">
                    Test
                </span>
            </a>
            <div class="corner corner-tl"></div>
            <div class="corner corner-tr"></div>
            <div class="corner corner-bl"></div>
            <div class="corner corner-br"></div>
        </div>


.overlay-caption {
        position: absolute;
        top: 0;
        left: 0;
        background: $cyan-overlay;
        width: 100%;
        height: 100%;
        opacity: 0;
        color: #fff;
        -webkit-transition: all 0.2s;
        transition: all 0.2s;
        font-size: 2em;
        text-align: center;
        padding: 60px 30px 0 30px;
        transition-duration: 0.5s;
-webkit-transition-duration: 0.5s; /* Safari */
        -moz-transition-duration: 0.5s;
        -o-transition-duration: 0.5s;
         &:hover {
                .overlay-caption {
                    opacity: 1;
            }
        }   

Answer 1

.overlay-caption {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        opacity: 0;
        color: #fff;
        font-size: 2em;
        text-align: center;
        padding: 60px 30px 0 30px;
        -webkit-transition:opacity 2s;
                }
.overlay-caption:hover{
        opacity: 1;
}

Answer 2

Add to CSS:

#samples .work-image a:hover .overlay-caption {
   opacity: 1;
}