jquery - 悬停时文本覆盖在图像上。如何阻止其他div移动

Question

如何在鼠标悬停时为图像创建文本叠加层。

另外，当我将鼠标悬停在图像上时，如何阻止所有其他 div 移动。就像我页面上的所有内容都略有变化。我不想移动页面上的任何其他内容，只希望在悬停时显示叠加层。非常感谢任何帮助。
Fiddle更有意义。 (将 JS 框打开到最大，以便您可以看到我在说什么)

HTML:

<div class='wrapper'>       
    <div id = 'portfolioContainer'> 
        <ul id='portfolioGallery'> 
            <li> 
                <a href="" target="_blank">
                    <img src= "" class='gallImage'>
                    <div class='gallText'> HTML CSS Javascript </div> 
                </a>
            </li>   
            <li> 
                <a href="" target="_blank">
                    <img src= "" class='gallImage'>
                    <div class='gallText'> HTML CSS(Sass) Javascript </div> 
                </a>
            </li>   
            <li> 
                <a href="" target="_blank">
                    <img src= "" class='gallImage' >
                    <div class='gallText'> HTML CSS Javascript </div>
                </a>
            </li>   
        </ul>
    </div>
</div>

JS:

$('.gallText').hide();

$('.gallImage').mouseover(function(){
    $(this).css('opacity','.2');
    $(this).next('div.gallText').show();
}).mouseout(function(){
    $(this).css('opacity','1');
    $(this).next('div.gallText').hide(); 
});

CSS:

#portfolioGallery {
    list-style:none;
    text-align: center;
}

#portfolioGallery li {
    display:inline-block;
    padding: 20px 20px;
}

#portfolioGallery img {
     border:3px solid #021a40;
     width: 350px;
     height: 200px;
    background:#D4CFC7;

}

Answer 1

一个解决方案是使用visibility: hidden/visibility: visible代替display: none;和display: block。 Visibility:hidden的意思是和display:none不同，元素是不可见的，但是在页面上为其分配了空间。例如:

$('.gallText').css("visibility", "hidden");

$('.gallImage').mouseover(function() {
  $(this).css('opacity', '.2');
  $(this).next('div.gallText').css("visibility", "visible");
}).mouseout(function() {
  $(this).css('opacity', '1');
  $(this).next('div.gallText').css("visibility", "hidden");
});

#portfolioGallery {
  list-style: none;
  text-align: center;
}
#portfolioGallery li {
  display: inline-block;
  padding: 20px 20px;
}
#portfolioGallery img {
  border: 3px solid #021a40;
  width: 350px;
  height: 200px;
  background: #D4CFC7;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='wrapper'>

  <div id='portfolioContainer'>
    <ul id='portfolioGallery'>
      <li>
        <a href="" target="_blank">
          <img src="" class='gallImage'>
          <div class='gallText'>HTML CSS Javascript</div>
        </a>
      </li>
      <li>
        <a href="" target="_blank">
          <img src="" class='gallImage'>
          <div class='gallText'>HTML CSS(Sass) Javascript</div>
        </a>
      </li>
      <li>
        <a href="" target="_blank">
          <img src="" class='gallImage'>
          <div class='gallText'>HTML CSS Javascript</div>
        </a>
      </li>

    </ul>
  </div>

</div>