Javascript 在img和文本之间切换

我正在尝试添加动画，所以当我将鼠标悬停在图片上时，它们会淡出，而另一个带有文本的div会淡入。正如本页所示：

但是，我把我的照片放在一个col-md-4类的引导容器中，每当其中一张照片消失时，其他的照片就会移动到它的位置

我怎样才能像示例网站一样制作一些东西

到目前为止，这就是我所拥有的，但它还没有接近

$(".box-1").on('mouseover', function() {
    $(this).fadeToggle(300).addClass('back');
});

你试过使用悬停吗？它将处理您的鼠标入和鼠标出事件

您可以将每个图像及其文本包装在周围的div中，并在此div上使用悬停函数。此外，如果您对每个图像/文本组合使用相同的类，那么jQuery非常简单

HTML

---

jQuery的淡入淡出效果将元素的display属性设置为“none”，并将其位置释放以用于其他元素。尝试在没有任何JS的情况下使用不透明度和：hover实际上，这是在以下位置完成的：

CSS:

---

下面是基于@Tricky12的HTML更新的plunker:

第二组div，后面是我想要的，但这可能比在淡出后添加HTML更复杂？看起来不错，但对我来说仍然不起作用。我有3个图像在一行，如果我停留在一个，其他图像接管它的位置。然后就是一团乱麻。@bubbeenn这里有一个JSFiddle与您的代码。我做了一些更改，特别是将文本与图像一起移动到div中，并将col-md-4移动到about-box容器中，而不是每个图像和文本。为了提琴，我还把你的col-md-4换成了col-sm-4。我用新的JSFIDLE和它的代码更新了我的答案。这真的不起作用…图像正在跳起来取代另一个。在JSFIDLE上？对我来说，它就像你链接的网站一样工作。我也添加了一些CSS，也许你错过了，因为我忘了提到它。谢谢，安德烈！这个解决方案对我有效。但是文本div与图片不一致。他们一直在左边。我试图添加内容：周围的空间，但它没有改变任何东西。有什么想法吗？Bootstrap的col-md-4类添加了15px的填充，所以我将左规则从0修改为15px，请检查我更新的plunker:，我也在那里添加了Bootstrap LIB，修复了它！这感觉像是一种变通方法，而不是正确的方法。谢谢你帮助我度过这场斗争！！：D

<div id="about" class="container-fluid">
<div class="header">
  About
</div>
<div class= "row front">
  <div class="col-sm-4 about-box-container">
    <img class="about-box front box-1" src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png">
    <div class="about-box back box-1">
       text
    </div>
  </div>
  <div class="col-sm-4 about-box-container">
    <img class="about-box front box-2" src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png">
    <div class="about-box back box-2">
       text
    </div>
  </div>
  <div class="col-sm-4 about-box-container">
    <img class="about-box front box-3" src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png">
    <div class="about-box back box-3">
       text
    </div>
  </div>
</div>

$('.about-box-container').hover(
function() {
    $(this).find('.front').fadeOut(300, function() {
    $(this).siblings('.back').fadeIn(300);
    });
},
function() {
    $(this).find('.back').fadeOut(300, function() {
    $(this).siblings('.front').fadeIn(300);
    });
}

.test {
  position: relative;
}

.test img {
  width: 100px;
  height: 100px;
  border: solid 1px lightgray;
  padding: 10px;
}

.test .test2 {
  width: 102px;
  height: 102px;
  padding: 10px;
  display: flex;
  text-align: center;
  align-items: center;
  justify-content: center;
  background: lightgray;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  transition: all 0.3s ease-out;
}
.test .test2:hover {
  opacity: 1;
}