html - 在图像上创建带有文本的干净悬停效果

Question

我正在使用 Bootstrap 4 构建一个网站。我创建了一组带有文本叠加层的缩略图图像，并创建了一个悬停效果，当鼠标悬停在上面时会改变图像的颜色。但是，将鼠标悬停在文本叠加层上时，效果会消失。关于将鼠标悬停在文本上时如何保持效果的任何想法？

这是我的 HTML:

<div class="row learn_more">
    <div class="col-md-3 col-6 learn_more-item">
        <a href="/work/index.html" class="learn_more-link">
            <div class="learn_more-hover">
            </div>
            <img src="img/work.png" class="img-fluid" alt="work">
            <div class="learn_more-text">
                <p>Work</p>
            </div>
        </a>
    </div>
    <div class="col-md-3 col-6 learn_more-item">
        <a href="/about/index.html" class="learn_more-link">
            <div class="learn_more-hover">
            </div>
            <img src="img/about.png" class="img-fluid" alt="about">
            <div class="learn_more-text">
                <p>About</p>
            </div>
        </a>
    </div>
</div>

这是我的 CSS:

.learn_more-link {
    display: block;
    position: relative;
}

.learn_more-hover {
    background: rgba(221, 33, 99, 0.75);
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 0;
}

.learn_more-hover:hover {
    opacity: 1;
}

.learn_more * {
    z-index: 2;
}

.learn_more img {
    opacity: 0.25;
}

.learn_more-text {
    text-align: left;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 2rem;
    font-weight: bold;
}

编辑:

感谢您的建议，我整理了如下代码。

HTML:

<div class="row learn_more">
    <div class="col-md-3 col-6 learn_more-item">
        <a href="/work/index.html" class="learn_more-link">
            <img src="img/work.png" class="img-fluid" alt="work"><span class="learn_more-text">Work</span>
        </a>
    </div>
    <div class="col-md-3 col-6 learn_more-item">
        <a href="/about/index.html" class="learn_more-link">
            <img src="img/about.png" class="img-fluid" alt="about"><span class="learn_more-text">About</span>
        </a>
    </div>
</div>

CSS:

.learn_more-link {
    display: block;
    position: relative;
}

.learn_more-link:hover {
    background: rgba(221, 33, 99, 0.75);
}

.learn_more img {
    opacity: 0.25;
}

.learn_more-text {
    text-align: left;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 2rem;
    font-weight: bold;
}

Answer 1

删除了一些 HTML

HTML

<div class="row learn_more">
    <div class="col-md-3 col-6 learn_more-item">
        <a href="/work/index.html" class="learn_more-link">
            <img src="https://storage.googleapis.com/gweb-uniblog-publish-prod/static/blog/images/google-200x200.7714256da16f.png" class="img-fluid" alt="work">
            <div class="learn_more-text">
                <p>Work</p>
            </div>
        </a>
    </div>
</div>

CSS

.learn_more-link {
    display: block;
    position: relative;
}

.learn_more-item:hover{
  background-color: rgba(221, 33, 99, 0.75);;
}

.learn_more img {
    opacity: 0.25;
}

.learn_more-text {
    text-align: left;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 2rem;
    font-weight: bold;
}

试试这个..和相应的风格

希望这对您有帮助..