个人中心
gpt4 book ai didi

html - 悬停时淡出文本

转载 作者：可可西里 更新时间：2023-11-01 13:42:51 26 4
gpt4 key购买 nike

我正在使用 Bootstrap 3，当有人将鼠标悬停在图片上时，我已经使下面的 paragraf 文本淡入淡出。

如果标题和副标题在那里看起来不太好，因此我希望当有人将鼠标悬停在图像上时，标题和副标题会淡出，所以只有 paragraf 显示文本。

我不太确定该怎么做，或者如何开始。有人可以给我一些建议吗？

现场演示可以是seen here .

body {
    background-color: #f5f5f5;
  }

  .mk.row [class*="col-"] {
    padding-right: 5px;
    padding-left: 5px;
  }
  
  .mk.row {
    margin-left: -5px;
    margin-right: -5px;
    background-color: #fff
  }
  
  .img-responsive {
    height: 100%;
  }
  
  /* Position of buttons/text in a single grid element */
  
  .inner-wrapper {
    background: none;
  }
  
  .bottom-left {
    position: absolute;
    bottom: 2%;
    left: 6%;
  }
  .light-font {
    color: #fff;
    text-transform: uppercase;
  }

/* Hover for grid elements that contains text */
 .hovereffect {
  display:inline-block;
  overflow: hidden;
  position: relative;
  text-align: center;
  cursor: default;
}

.hovereffect .overlay {
  width: 100%;
  height: 100%;
  position: absolute;
  overflow: hidden;
  top: 0;
  left: 0;
  transition: all 0.4s ease-in-out;
}

.hovereffect:hover .overlay {
  background-color: rgba(170,170,170,0.4);
}

.hovereffect h2, .hovereffect img {
  transition: all 0.4s ease-in-out;
}

.hovereffect img {
  display: block;
  position: relative;
  transform: scale(1.1);
}

.hovereffect:hover img {
  transform: scale(1);
}

.hovereffect h2 {
  text-transform: uppercase;
  color: #fff;
  text-align: center;
  position: relative;
  font-size: 17px;
  padding: 10px;
  background: rgba(0, 0, 0, 0.6);
}

.hovereffect p.info {
  text-decoration: none;
  color: #fff;
  border: 1px solid #fff;
  background-color: transparent;
  opacity: 0;
  transform: scale(1.5);
  transition: all 0.4s ease-in-out;
  font-weight: normal;
  height: 90%;
  width: 90%;
  top:5%; /* (100% - 85%)/2 */
  left:5%;
  position: absolute;
  text-align: left;
  padding: 20px 20px 20px 20px;
}

.hovereffect:hover p.info {
  opacity: 1;
  transform: scale(1);
  background-color: rgba(0,0,0,0.4);
}
<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
	<div class="mk row">
      <div class="col-sm-6">
          <a href="#">
              <div class="hovereffect">
                  <img src="https://drwyjmricaxm7.cloudfront.net/repository/TigerTrailItinerary1RegionalToursIndia-58141245765254_crop_610_410.jpg" alt="Accesories" class="img-responsive"></img>
                  <div class="overlay">
                      <a href="#">
                          <p class="info">
                            Lorem ipsum dolor sit amet, consectetuer vel interdum tempus egestas sed, eros ea ullamcorper tellus ut vestibulum ante. Id posuere sem est arcu, dapibus est. Neque ornare magna nunc volutpat blandit lorem, lacus sagittis ligula volutpat ac nullam<br/><br/> Vulputate luctus ipsum velit eget amet aliquam. Ac nibh dictum fermentum sodales, tincidunt metus placerat erat. In donec vitae luctus lorem repudiandae fames, explicabo donec in a non molestie. Montes ac quis eget morbi, vel 
                          </p>
                      </a>
                  </div>
                  <div class="inner-wrapper bottom-left">
                      <h3 class="light-font">This headline need to fade out</h3>
                      <span class="light-font">This subheadline should fade out when hover</span>
                      <!--<button class="btn btn-success btn-lg">Læs mere</button>-->
                  </div>
              </div>
          </a>
      </div>
  </div>
</div>


</body>
</html>

最佳答案

很简单

我对 css 做了细微的改动部分

正如您添加了 .hovereffect:hover .overlay对于 <div class='overlay' ../>规则

添加.inner-wrapper.bottom-left h3选择器 :hover 

body {
    background-color: #f5f5f5;
  }

  .mk.row [class*="col-"] {
    padding-right: 5px;
    padding-left: 5px;
  }
  
  .mk.row {
    margin-left: -5px;
    margin-right: -5px;
    background-color: #fff
  }
  
  .img-responsive {
    height: 100%;
  }
  
  /* Position of buttons/text in a single grid element */
  
  .inner-wrapper {
    background: none;
  }
  
  .bottom-left {
    position: absolute;
    bottom: 2%;
    left: 6%;
  }
  .light-font {
    color: #fff;
    text-transform: uppercase;
  }

/* Hover for grid elements that contains text */
 .hovereffect {
  display:inline-block;
  overflow: hidden;
  position: relative;
  text-align: center;
  cursor: default;
}

.hovereffect .overlay {
  width: 100%;
  height: 100%;
  position: absolute;
  overflow: hidden;
  top: 0;
  left: 0;
  transition: all 0.4s ease-in-out;
}

.hovereffect:hover .overlay {
  background-color: rgba(170,170,170,0.4);
}

.hovereffect h2, .hovereffect img {
  transition: all 0.4s ease-in-out;
}

.hovereffect img {
  display: block;
  position: relative;
  transform: scale(1.1);
}

.hovereffect:hover img {
  transform: scale(1);
}

.hovereffect h2 {
  text-transform: uppercase;
  color: #fff;
  text-align: center;
  position: relative;
  font-size: 17px;
  padding: 10px;
  background: rgba(0, 0, 0, 0.6);
}

.hovereffect p.info {
  text-decoration: none;
  color: #fff;
  border: 1px solid #fff;
  background-color: transparent;
  opacity: 0;
  transform: scale(1.5);
  transition: all 0.4s ease-in-out;
  font-weight: normal;
  height: 90%;
  width: 90%;
  top:5%; /* (100% - 85%)/2 */
  left:5%;
  position: absolute;
  text-align: left;
  padding: 20px 20px 20px 20px;
}

.hovereffect:hover p.info {
  opacity: 1;
  transform: scale(1);
  background-color: rgba(0,0,0,0.4);
}
.hovereffect:hover .inner-wrapper.bottom-left h3,.hovereffect:hover .inner-wrapper.bottom-left span{
   
  transition: all 0.4s ease-in-out;
}
.hovereffect:hover .inner-wrapper.bottom-left h3,.hovereffect:hover .inner-wrapper.bottom-left span{
  opacity:0;
 }
<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
	<div class="mk row">
      <div class="col-sm-6">
          <a href="#">
              <div class="hovereffect">
                  <img src="https://drwyjmricaxm7.cloudfront.net/repository/TigerTrailItinerary1RegionalToursIndia-58141245765254_crop_610_410.jpg" alt="Accesories" class="img-responsive"></img>
                  <div class="overlay">
                      <a href="#">
                          <p class="info">
                            Lorem ipsum dolor sit amet, consectetuer vel interdum tempus egestas sed, eros ea ullamcorper tellus ut vestibulum ante. Id posuere sem est arcu, dapibus est. Neque ornare magna nunc volutpat blandit lorem, lacus sagittis ligula volutpat ac nullam<br/><br/> Vulputate luctus ipsum velit eget amet aliquam. Ac nibh dictum fermentum sodales, tincidunt metus placerat erat. In donec vitae luctus lorem repudiandae fames, explicabo donec in a non molestie. Montes ac quis eget morbi, vel 
                          </p>
                      </a>
                  </div>
                  <div class="inner-wrapper bottom-left">
                      <h3 class="light-font">This headline need to fade out</h3>
                      <span class="light-font">This subheadline should fade out when hover</span>
                      <!--<button class="btn btn-success btn-lg">Læs mere</button>-->
                  </div>
              </div>
          </a>
      </div>
  </div>
</div>


</body>
</html>

关于html - 悬停时淡出文本，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51811418/

26 4 0
文章推荐： javascript - 多次单击按钮，在 JavaScript 中播放多个音频(旧声音重叠新声音)
文章推荐： php - 在 Doctrine DQL 查询中使用 COLLATE (Symfony2)
文章推荐： javascript - 如何使用 $.ajax(); laravel 中的函数
文章推荐： javascript - 如何创建 html 工具提示
可可西里
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com