Question

我是一位非常新的网络开发者。我目前正在编写一个简单的wordpress landing page编码，我希望添加一些功能，以便在用户将鼠标悬停在所述图像上时变暗并添加文本。它确实应该是非常简单的事情。

对于实际执行相同wordpress主题的an example并且做得对。

在上面页面的“关于我们”部分，他们的图片具有我悬停所需的完全相同的功能，但我不知道他们是如何做到这一点的。

如果您需要进一步澄清，请不要犹豫，我不确定我的词典是否正确/清晰。

Answer 1

当包装器鼠标悬停时，只显示带有不透明度的白色background元素和内容元素。请注意，您需要将内容与背景元素分开，以便背景的不透明度不会影响内容。

<div class="wrap">
    <div class="content">This is the content</div>
    <div class="bkg"></div>
</div>

.wrap {
    background-image:url('http://www.online-image-editor.com/styles/2013/images/example_image.png');
    width:475px;
    height:365px;
    position:relative;
}
.wrap:hover .bkg {
    display:block;
}

.wrap:hover .content {
    display:block;
}

.bkg {
    background:#fff;
    opacity:0.5;
    position:absolute;
    width:100%;
    height:100%;
    display:none;
    z-index:1;
    filter: alpha(opacity=50);
}

.content {
    width:100%;
    height:100%;
    display:none;
    z-index:3;
    position:absolute;
}

Answer 2

这是悬停时的css过渡。

See a live demo here

这是设置html：

<div class="container">
    <div class="bottom-layer"></div>
    <div class="overlay">
        <h2>Hi there!</h2>
    </div>
</div>

容器有一个定位的叠加层，在底层内容上淡入。

这是驾驶css：

.container,
.bottom-layer,
.overlay {
    height: 100px;
    width: 200px;
}

.container {
    position: relative;
}

.bottom-layer {
    background-image: url(http://rndimg.com/ImageStore/OilPaintingBlue/200x100_OilPaintingBlue_ede2e8a97ced4beb86bde6752ae5cfab.jpg);
}

.overlay {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    background-color: rgba(255,255,255, .1);
    transition: opacity 0.6s;
}

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

两个重要的部分是定位和过渡。叠加必须绝对定位以在同一级别（其“兄弟”）上呈现元素。我们将不透明度设置为0，但是当父级覆盖时将其设置为1.

然后，我们只是告诉它在不透明度发生变化时运行转换。

在鼠标悬停时添加叠加

2 个答案: