Question

我正在尝试为某些图像添加CSS3悬停效果，这样当有人将鼠标悬停在图像上时，某些文字会在白色背景上向上滑动。我尝试过一些指南，但我认为它们与我的其他代码发生了冲突（因为我还在文本中叠加了文字和一个“新”标记。

这是我的代码，所以你可以看到（包括内联样式）

[{"cid":"PWER","data":[{"1437957635000":37}],"sid":"9271","units":"kWm","age":6},{"cid":"PWER_GAC","data":[{"1437957635000":0}],"sid":"9271","units":null,"age":6},{"cid":"FBAK_IMM","data":[{"1437957629000":0}],"sid":"9271","units":null,"age":12},{"cid":"PWER_IMM","data":[{"1437957629000":0}],"sid":"9271","units":null,"age":12}]

Answer 1

除非必要，否则我建议不要使用JavaScript，就像我正确地阅读您的问题一样，可以在CSS中完成。这是一个示例 - 我建议将所有内联样式重构为样式标记，否则如果您需要将所有样式内联，则将新样式重构为现有内联样式。

＆＃13;

#container:hover #name {
  transform: translate(0, 0) !important;
}

#container #name {
  transition: transform 0.25s ease;
  transform: translate(0, 100%) !important;
}

#container {
  overflow: hidden;
  position: relative;
}

#name {
  width: 100%;
  height: 100%;
  background-color: rgba(255,255,255,0.5);
}

＆＃13;

<div id="container">
<img src="http://stuartgreen.me.uk/pontins/wp-content/uploads/2015/07/penguin-test.jpg" style="width: 100%;">
<div style="display: inline-block; position: absolute; top: -11px; right: -11px;">
  <img src="http://stuartgreen.me.uk/pontins/wp-content/uploads/2015/07/new-posts.png">
</div>
<div id="name" style="position: absolute; left: 0; right: 0; top: 0; bottom: 0; text-align: center;">
  <p style="display: inline-block; font-family: 'Amatic SC'; color: #333; text-shadow: 2px 2px 2px #3a3c3d; margin: 0; padding: 10px; font-size: 38px; line-height: 38px;">Brean Sands</p>
  <p>A description</p>
</div>
</div>

＆＃13;

Answer 2

这可能会有所帮助。

.img {
  position: relative;
  border: 10px solid #f00;
  display: inline-block;
  vertical-align: top;
  cursor: pointer;
  margin: 10px;
}
.overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  transition: all .5s;
  overflow: hidden;
  height: 0;
  background: white;
  text-align: center;
  font-size: 50px;
}
.img:hover .overlay,
.overlay:hover {
  height: 100%;
  background: white;
}
.img > img {
  display: block;
}

<div class="img">
  <img src="http://www.placehold.it/300/eee" />
  <div class="overlay">Hello!</div>
</div>
<div class="img">
  <img src="http://www.placehold.it/400/eee" />
  <div class="overlay">Bye!</div>
</div>

在悬停时在图像上滑动文本

2 个答案: