Css 在图像上将文本悬停在图像上方的框中

我想在图像上的文字悬停就像在这个网站上。使用CSS3

您可以试试这个（只需采用颜色和div）

以下是

HTML

：

<div class="container">
    <div class="row">
        <div class="col-md-3 row_cont">
        <img class="image_box" src="path_to_the_image" id="image"/>
            <div id="overlay">
                <a href="#" class="link_hover">desired text</a>
            </div>
        </div>

        <div class="col-md-3 row_cont">
        <img class="image_box" src="path_to_the_image" id="image"/>
            <div id="overlay">
                <a href="#" class="link_hover">desired text</a>
            </div>
        </div>

        <div class="col-md-3 row_cont">
        <img class="image_box" src="path_to_the_image" id="image"/>
            <div id="overlay">
                <a href="#" class="link_hover">desired text</a>
            </div>
        </div>

        <div class="col-md-3 row_cont">
        <img class="image_box" src="path_to_the_image" id="image"/>
            <div id="overlay">
                <a href="#" class="link_hover">desired text</a>
            </div>
        </div>
    </div>
</div>

---

让我知道这是否有帮助

我希望悬停时显示文本的小框，而不是悬停时显示完整框，就像在这个网站上一样，您需要在您的方面更加努力。我不能给你一个端到端的解决方案，而代你做这项工作。你对我的答案有一个很好的开始，只是你需要调整一下。现在检查答案，我已经编辑过了。

.row_cont {
    position:relative;
    width:95%;
    height:240px;
    margin-bottom: 20px;
}

.row_cont {
    position:relative;
    width:95%;
    height:240px;
    margin-bottom: 20px;
}

#image {
    position:absolute;
    width:95%;
    height:240px;
    /* background:black; */
}

#overlay {
    position:absolute;
    width:95%;
    height:240px;
    background: #fff;
    opacity: 0;
    -webkit-transition: all .6s ease;
    -moz-transition: all .6s ease;
    -ms-transition: all .6s ease;
    -o-transition: all .6s ease;
    transition: all .6s ease;
}

#overlay:hover {
    opacity: .95;
    box-shadow: 0px 0px 30px 3px #000;
}

a.link_hover {
    position: relative;
    top: 45%;
    left: 13%;
    font-size: 26px;
    font-weight: 600;
    text-transform: uppercase;
    color: rgba(2, 103, 193, .7);
    text-decoration: none;
    -webkit-transition: all .3s ease;
    -moz-transition: all .3s ease;
    -ms-transition: all .3s ease;
    -o-transition: all .3s ease;
    transition: all .3s ease;
}

a.link_hover:hover {
    color: rgba(2, 103, 193, 1);
}

.image_box:hover {
    -ms-filter: blur(3px)!important;
    filter: blur(3px)!important;
    cursor: pointer;
}