需要创建响应式内容悬停元素的技巧

Question

现在我需要您的帮助来为客户创建这个“内容悬停元素” 具体5网站..

到目前为止，这是我的网站：testi4.aada.fi

我现在正在处理一个悬停元素，它应该像这样工作：http://testi4.aada.fi/files/7514/1802/2403/kwh_hover.png

我不知道如何编写代码..

有这个图像，当用户将鼠标放在它上面时，用户应该在该图像下获得其他包含内容的 div..

欢迎任何提示！！！

// 米卡

Answer 1

简单的悬停效果，如果需要一些额外的动画，使用jQuery。

.wrapper {
  width: 33%;
  float: left;
  box-sizing: border-box;
  border: 1px solid #ddd;
  position: relative;
}
.hover {
  display: none;
  width: 100%;
  position: absolute;
  left: 0;
  bottom: 0;
  background-color: #ddd;
}
.wrapper:hover .hover {
  display: block;
}

<div class="wrapper">
  <img src="http://lorempixel.com/400/200/animals" />
  <div class="hover">
    some text here;
  </div>
</div>
<div class="wrapper">
  <img src="http://lorempixel.com/400/200/sports" />
  <div class="hover">
    some text here;
  </div>
</div>
<div class="wrapper">
  <img src="http://lorempixel.com/400/200/city" />
  <div class="hover">
    some text here;
  </div>
</div>