camila camila - 1 month ago 8
jQuery Question

CSS hover effect text appears but image goes up and down

I'm trying to make a hover effect, which is when user hover mouse on the image than it shows text and show a color gradient. I succeed to make text comes out but the problem is, whenever mouse hover on the image, the image goes up and down with text. What I wanted to do was the image does not move but only text on the image appears and goes up, and when mouse does not hover the image than text goes down and eventually disappears.



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

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




Answer

Did some rearrangement of your div with id text

see snippet below

#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%)
}
<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>