html - 当我使用 :hover in css (No javascript) 时元素向上移动

Question

我试图在没有 JavaScript 的情况下创建一个效果，当您的鼠标悬停在图像上时，图像放大，出现阴影，然后有一个透明的 div，里面的文本从图片的顶部。

#note {
  display: block;
  -webkit-transition: -webkit-transform .3s ease-out;
  -moz-transition: -moz-transform .3s ease-out;
  -o-transition: -o-transform .3s ease-out;
  -ms-transition: -ms-transform .3s ease-out;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
  transition: box-shadow 0.3s ease-in-out, transform .3s ease-out;
  width: 125px;
  height: 175px;
}

#note:hover {
  -webkit-box-shadow: 12px 18px 53px 0 rgba(148, 138, 148, 0.81);
  -moz-box-shadow: 12px 18px 53px 0 rgba(148, 138, 148, 0.81);
  box-shadow: 12px 18px 53px 0 rgba(148, 138, 148, 0.81);
  -webkit-transform: scale(1.3);
  -moz-transform: scale(1.3);
  -ms-transform: scale(1.3);
  -o-transform: scale(1.3);
  transform: scale(1.3);
  width: 125px;
  display: block;
  width: 125px;
  height: 175px;
}

#box1 {
  position: absolute;
  top: -10px;
  left: 15px;
  font-size: 15px;
  width: 100px;
  height: 100px;
}

#text1 {
  opacity: 0;
  transition: all 0.5s;
  width: 100px;
  height: 100px;
}

#note:hover #text1 {
  opacity: 1;
}

#over {
  background-color: grey;
  position: relative;
  top: 89px;
  left: -7px;
  width: 125px;
  height: 176px;
}

<div id="note">
  <img src="http://www.simpleimageresizer.com/_uploads/photos/b8804940/Chick_Pea_Wrap_1_125x175.jpg">
  <div id="box1">
    <div id="over"></div>
    <div id="text1">
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris at lacus leo. Fusce tempus eleifend ligula at bibendum. Proin lacus.
      </p>
    </div>
  </div>
</div>

如果您需要更多信息，请询问。我已经广泛搜索了这个问题的答案，但似乎我是代码的新手，我不知道要输入什么关键字。感谢任何和所有帮助。

Answer 1

这是一个可以完成您所要求的工作示例。我调整了您的 HTML 并添加了必要的 CSS 并标记了样式 /* Added */。我通常只是在您的文本容器中添加了一些定位，并在动画中添加了另一个属性。

#note {
  display: block;
  -webkit-transition: -webkit-transform .3s ease-out;
  -moz-transition: -moz-transform .3s ease-out;
  -o-transition: -o-transform .3s ease-out;
  -ms-transition: -ms-transform .3s ease-out;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
  transition: box-shadow 0.3s ease-in-out, transform .3s ease-out;
  width: 125px;
  height: 175px;
  overflow: hidden; /* Added */
  position: relative; /* Added */
}

#note:hover {
  -webkit-box-shadow: 12px 18px 53px 0 rgba(148, 138, 148, 0.81);
  -moz-box-shadow: 12px 18px 53px 0 rgba(148, 138, 148, 0.81);
  box-shadow: 12px 18px 53px 0 rgba(148, 138, 148, 0.81);
  -webkit-transform: scale(1.3);
  -moz-transform: scale(1.3);
  -ms-transform: scale(1.3);
  -o-transform: scale(1.3);
  transform: scale(1.3);
  display: block;
  width: 125px;
  height: 175px;
}

#text1 {
  opacity: 0;
  transition: all 0.5s ease 0s;
  padding: 10px; /* Added */
  width: 125px; /* Added */
  height: 175px; /* Added */
  position: absolute; /* Added */
  bottom: 100%; /* Added */
  left: 0px; /* Added */
  -webkit-box-sizing: border-box; /* Added */
  -moz-box-sizing: border-box; /* Added */
  box-sizing: border-box; /* Added */
}

#note:hover #text1 {
  opacity: 1;
  bottom: 0px; /* Added */
}

<div id="note">
  <img src="http://www.simpleimageresizer.com/_uploads/photos/b8804940/Chick_Pea_Wrap_1_125x175.jpg">
  <div id="text1">
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    </p>
  </div>
</div>