悬停时的图像和颜色叠加 [英] Image and Color Overlay on Hover

问题描述

将鼠标悬停在图像上时，我很难获得彩色叠加层（和图像）的显示。

I'm having a hard time getting a color overlay (and image) to appear when hovering over an image.

基本上，用户应该看到此叠加层（

Essentially, the user should see this overlay (which is separated in 2 below):

我有以下HTML代码段：

I have the following HTML snippet:

<ul id="Grid">
    <li class="mix category_1 mix_all" style="display: inline-block; opacity: 1;">
        <img src="http://i.imgur.com/J4PaouI.jpg" alt="#">
    </li>
</ul>

以下是特定的CSS（请确保使用z索引）：

Here is the particular CSS (and a z-index just to be sure):

.mix_all:hover {
    background: url(http://i.imgur.com/0lu7dWs.png) no-repeat center !important;
    background-color: #de6573 !important;
    z-index: 99999999;
}
#Grid .mix {
    width: 200px;
    height: 200px;
    margin-bottom: 20px;
}
.mix.mix_all img {
    max-height: 200px;
    max-width: 200px;
}

这里是小提琴的链接：

http://jsfiddle.net/t2ea9/

推荐答案

以下是正确的版本： http://jsfiddle.net/maximglad​​kov/b2twr/1/

您应该在位置添加一个附加元素：绝对并显示它。

<ul id="Grid">
    <li class="mix category_1 mix_all">
        <img src="http://i.imgur.com/J4PaouI.jpg" alt="#" />
        <div class="overlay"></div>
    </li>
</ul>

CSS

CSS

.mix_all {
    position: relative;
}

.mix_all .overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.mix_all:hover .overlay {
    background: url(http://i.imgur.com/0lu7dWs.png) no-repeat center !important;
    background-color: #de6573 !important;
    z-index: 99999999;
}

这篇关于悬停时的图像和颜色叠加的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！