Question

我试图这样做，当鼠标悬停在图像上时，它会显示标题和蓝色背景。我试图复制的效果可以在http://adamginther.com/gradshow/students.php的任何图像上找到，我试图将这种效果带到http://adamginther.com/gradshow/students/adam-ginther.php上的样本中。谢谢！

<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

添加到CSS：

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

在图像叠加上创建标题

2 个答案: