使用文本在图像上创建干净的悬停效果

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;
}

试试这个..并相应地设计风格

希望这会有所帮助..

Answer 2

删除了一些html代码并重新排列了div块..

<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>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>About</span>

    </a>

</div>

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

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


.learn_more img 
{
    opacity: 0.25;
}

span
{
    font-size:20px;
    margin-left:30px;
}

希望这会有所帮助..

Answer 3

您是否尝试将悬停效果赋予

.learn_more-item{/*your code here*/}

Answer 4

试试这个

.hovereffect {
  width: 100%;
  height: 100%;
  float: left;
  overflow: hidden;
  position: relative;
  text-align: center;
  cursor: default;
}

.hovereffect .overlay {
  width: 100%;
  height: 100%;
  position: absolute;
  overflow: hidden;
  top: 0;
  left: 0;
  background-color: rgba(75,75,75,0.7);
  -webkit-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
}

.hovereffect:hover .overlay {
  background-color: rgba(186, 0, 34, 0.52);
}

.hovereffect img {
  display: block;
  position: relative;
}

.hovereffect h2 {
  text-transform: uppercase;
  color: #fff;
  text-align: center;
  position: relative;
  font-size: 17px;
  padding: 10px;
  background: rgba(0, 0, 0, 0.6);
  -webkit-transform: translateY(45px);
  -ms-transform: translateY(45px);
  transform: translateY(45px);
  -webkit-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
}

.hovereffect:hover h2 {
  -webkit-transform: translateY(5px);
  -ms-transform: translateY(5px);
  transform: translateY(5px);
  margin:0px;
}

.hovereffect p.text {
  display: inline-block;
  text-decoration: none;
  padding: 7px 14px;
  text-transform: uppercase;
  color: #fff;
  border: 1px solid #fff;
  background-color: transparent;
  opacity: 0;
  filter: alpha(opacity=0);
  -webkit-transform: scale(0);
  -ms-transform: scale(0);
  transform: scale(0);
  -webkit-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
  font-weight: normal;
  margin: 7px;
}

.hovereffect:hover p.text {
  opacity: 1;
  filter: alpha(opacity=100);
  -webkit-transform: scale(1);
  -ms-transform: scale(1);
  transform: scale(1);
}

.hovereffect p.text:hover {
  box-shadow: 0 0 5px #fff;
}

<div class="container">
    <h1>Hover Effect</h1>
	<div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
        <div class="hovereffect">
            <img class="img-responsive" src="http://cableandmedia.com/abranew/img/banner/3.jpg" alt="">
            <div class="overlay">
               <h2>Your Title</h2>
               <p class="text">Your dummy text
               <a href="#">read more</a></p>
            </div>
        </div>
    </div>
</div>