悬停时淡出文本

时间：2018-08-12 17:53:09

标签： html css twitter-bootstrap

我正在使用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>

2 个答案:

答案 0 :(得分：1)

这很容易

我对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>

答案 1 :(得分：0)

将transition: all 0.4s ease-in-out;设置为类h3 and subheading并将opacity:0设置为悬停，这样，从图像上删除鼠标时，将获得相同的效果。请检查以下工作片段，希望对您有所帮助：）

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

.inner-wrapper.bottom-left h3,
.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;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<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" />
          <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>
          </div>
        </div>
      </a>
    </div>
  </div>
</div>

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

相关问题
最新问题