html - 如何在悬停时通过向上移动上部 div 来显示 Link/DIV？

Question

我正在尝试在网站上构建团队部分。我有一个带有人物形象和姓名的 Div。当我将鼠标悬停在名称上时，我希望有一个链接出现在它的位置并将名称向上移动。像这样的东西(团队部分): https://www.templatemonster.com/de/demo/55809.html

我尝试使用我在此处找到的解决方案并对其进行修改，但它并没有像我希望的那样工作:

#stuff {
    position: absolute;
    top: 100px;
    opacity: 0.0;
    -webkit-transition: all 500ms ease-in-out;
    -moz-transition: all 500ms ease-in-out;
    -ms-transition: all 500ms ease-in-out;
    -o-transition: all 500ms ease-in-out;
    transition: all 500ms ease-in-out;
}
#hover {
    width:80px;
    height:20px;
    background-color:green;
    margin-top: 50px;
    margin-bottom:15px;
}
#hover:hover {
    margin-top:25px;
    margin-bottom: 25px;
    opacity: 1.0;
}
#stuff:hover {

    opacity: 1.0;
}



<link rel="stylesheet" type="text/css" href="main.css">
<section>

    <div id="hover">Hover</div>
<div id="stuff">stuff</div>

是否有使用 CSS 和/或 Bootstrap 的简单解决方案？

Answer 1

我只使用 css 做了一个例子。

section {
  margin:5px auto;	
}

.hover-div {
  color:#FFF;
  width:200px;
}

.hover-div .stuff {
  background-color:#F00;
  height:100px;
  margin-top:0;
  position:relative;
  width:100%;	
  z-index:2;

  -webkit-transition:margin-top 0.3s;
      transition:margin-top 0.3s;
}

.hover-div .stuff-hidden {
  background-color:#00F;
  height:0;
  width:100%;

  -webkit-transition:height 0.3s;
      transition:height 0.3s;	
}

.hover-div:hover .stuff {
  margin-top:-40px;
}

.hover-div:hover .stuff-hidden {
  height:40px;
}

.image {
  background-color:#0F0;
  height:100px;
  text-align:center;
  width:100%;
}

<section>
  <div class="image">image</div> 
	<div class="hover-div">
        <div class="stuff">Stuff</div>
        <div class="stuff-hidden">Hidden stuff</div>
    </div>
</section>