出现CSS悬停效果文字，但图片上下移动

Question

我尝试制作悬停效果，即当用户将鼠标悬停在图像上而不是显示文本并显示颜色渐变时。我成功地让文字出来但问题是，每当鼠标悬停在图像上时，图像就会随文本上下移动。我想要做的是图像不移动，但只有图像上的文字出现并上升，当鼠标没有悬停在图像上而不是文本下降并最终消失。

＆＃13;

＆＃13;

.text {
  font-size: 0px;
  color: white;
  opacity: 0.8;
}
.pic:hover .text {
  text-align: center;
  font-size: 2em;
  font-weight: 700;
  font-family: 'Alegreya', serif;
  padding: 30px;
  transition: 0.3s;
  /* Transition effects on hover (color) */
  color: #fff;
  -webkit-transform: translate3d(0, -50%, 0) translate3d(0, -40px, 0);
  transform: translate3d(0, -50%, 0) translate3d(0, -100px, 0);
}

＆＃13;

<section class="cd-gallery">
  <ul>
    <li class="mix color-1 check1 radio2 option3">
      <div class="pic">


        <img src="img/10_350.jpg" alt="Image 1" style="width:100%;cursor:zoom-in" onclick="document.getElementById('modal01').style.display='block'">
        <div class="text">
          <span clss="text-content"><span>Band<br>Portrait</span></span>
        </div>
      </div>
      <div id="modal01" class="w3-modal" onclick="this.style.display='none'">
        <span class=" w3-padding-16 w3-display-topright">&times;</span>
        <div class="w3-modal-content w3-animate-zoom">
          <img src="img/10.jpg" alt="Image 2" style="width:100%">
        </div>
      </div>
    </li>

＆＃13;

＆＃13;

＆＃13;

Answer 1

您的.text可以是position: absolute并更改底部以设置简单翻译动画。然后，您需要一个包含position: relative的包装器。它看起来像这样：

html：

<div class="hover">
  <img class="pic" src="image.jpg"/>
  <p class="text">Text hover</p>
</div>

的CSS：

.hover {
  position: relative;
  display: inline-block;
}

.text {
  position: absolute;
  bottom: 0;
  font-size: 0px;
  width: 100%;
  text-align: center;
  color: white;
  opacity:0.8;

}

.pic:hover ~  .text {
  bottom: 20px;
  font-size: 2em;
  font-weight:700;
  transition: 0.3s; /* Transition effects on hover (color) */
  color: red;
}

Answer 2

您的div重新排列了text

请参阅下面的代码段

＆＃13;

＆＃13;

#ul_container {
  list-style-type: none;
}
#modal01 {
  position: relative;
}
.text {
  position: absolute;
  top: 0%;
  color: black;
  opacity: 0.8;
  left: 50%;
  transform: translate(-50%, 0);
  -ms-transform: translate(-50%, 0);
  -moz-transform: translate(-50%, 0);
  -webkit-transform: translate(-50%, 0);
  opacity: 0;
}
/*.text{
  font-size: 0px;
}*/

#modal01:hover .text {
  text-align: center;
  font-size: 2em;
  font-weight: 700;
  font-family: 'Alegreya', serif;
  transition: 0.3s;
  opacity: 1;
  /* Transition effects on hover (color) */
  /*-webkit-transform: translate3d(0, -50%, 0) translate3d(0, -40px, 0);
  transform: translate3d(0, -50%, 0) translate3d(0, -100px, 0);*/
  transform: translate(-50%, -100%) -webkit-transform: translate(-50%, -100%);
  -ms-transform: translate(-50%, -100%);
  -moz-transform: translate(-50%, -100%)
}

＆＃13;

<section class="cd-gallery">
  <br>
  <br>
  <br>
  <br>
  <br>
  <ul id="ul_container">
    <li class="mix color-1 check1 radio2 option3">
      <div class="pic">
        <img src="img/10_350.jpg" alt="" style="width:100%;cursor:zoom-in" onclick="document.getElementById('modal01').style.display='block'">
      </div>

      <div id="modal01" class="w3-modal" onclick="this.style.display='none'">
        <div class="text">
          <span clss="text-content"><span>Band<br>Portrait</span></span>
        </div>
        <span class=" w3-padding-16 w3-display-topright">&times;</span>
        <div class="w3-modal-content w3-animate-zoom">
          <img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcTjkeF83tqt6ukdw6bVVO0UF6EbyBcbudj89Hp2eihe3h3sd0D4MgpkTFUE" style="width:100%">
        </div>
      </div>
    </li>

＆＃13;

＆＃13;

＆＃13;