Question

嗨我试图添加悬停到我的画廊图像，但我认为某些代码阻止它工作。不能弄清楚它是什么。帮助会很棒。我只是粘贴第一张图片的HTML

<div class="images">
<h1>Work</h1>

<div class="responsive">
    <div class="gallery">
        <a target="_blank" href="images/thumb_diesel.jpg">
            <img src="images/thumb_diesel.jpg" alt="Diesel Car">
            <div class="overlay">
                <h6>Diesel Car</h6>
                <div class="view">View Case Study</div>
            </div>
        </a>
    </div>
</div>


.images {
    width:78%;
    margin-left: auto;
    margin-right: auto;
}

.gallery {
    position: relative;
}

div.gallery img {
    width: 100%;
    height: auto;
}

.overlay {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100%;
    width: 100%;
    opacity: 0;
    transition: .5s ease;
    background-color: rgba(0,0,0,0.8);
}

.overlay:hover .overlay {
    opacity: 1;
}

h6 {
    text-align: center;
    font-family: 'Raleway', sans-serif;
    font-weight: 700;
    font-size: 45px;
    color: #fff;
    line-height: 1px;
    padding-top: 30px;
}

.view {
    text-align: center;
    font-family: 'Raleway', sans-serif;
    font-weight: 700;
    line-height: 1px;
    border-color: #fff;
    border: 5px;
    padding: 30px;
    margin-left: 90px;
    margin-right: 90px;
    color: #fff;
    font-size: 20px;
}

由于史蒂夫

Answer 1

要使悬停工作，您需要在css中更改以下代码：

.overlay:hover .overlay {
    opacity: 1;
}

为：

.overlay:hover {
    opacity: 1;
}

如果您希望当有人将鼠标悬停在图片上时显示“Diesel Car”文字，则需要将title属性添加到img标记。

因此，您的img代码就像：

<img src="images/thumb_diesel.jpg" alt="Diesel Car" title="Diesel Car">

alt属性在某些基于webkit的浏览器上不起作用。

Answer 2

.gallery:hover .overlay {
opacity: 1;

Please checkout JS Bin

图库悬停问题

2 个答案: