0

当前示例：已删除链接

h2覆盖图像的底部并且永久可见。当光标悬停在图像上时，span下方的文本h2会移动到图像上并h2随之向上推。这目前有效，但我无法弄清楚如何添加轻松过渡，因为额外的文本会在悬停时出现。和h2都span包含在div.img_txt所以也许这就是关键？

我可以使文本上的过渡起作用，但它不会h2向上推动。主要问题似乎是它不会是我希望文本向上移动的固定高度，因为它可能是 1 到 4 行之间的任何内容。h2也可以超过 1 行或更多行。

这是没有任何过渡效果的代码：

HTML

<div class="rimg1">
  <a href=""><div class="img_txt"><h2>Apples the most attractive fruit</h2><span>Apples pip other fruits as most appeeling for core values</span></div><img src="graphics/apple-tree.jpg" width="304" height="220" alt=""></a>
</div>

CSS

div.rimg1{
  float: left;
  width: 284px;
  height: 220px;
  position: relative;
}

div.rimg1 span{
  color: #fff; 
  font-size: 0.9em; 
  position: absolute; 
  visibility: hidden; 
  transition: all 0.6s ease;
  /* cross-browser transition CSS removed for ease of viewing */
}

div.rimg1:hover span{
  position: relative; 
  bottom: 0; 
  visibility: visible;
}

div.img_txt{
  width: 284px; 
  background: rgba(51,51,51,0.80); 
  padding: 5px 10px 5px 10px; 
  position: absolute; 
  bottom: 0; 
  z-index: 9; 
  overflow: hidden;
}

上面的各种定位属性是针对整个页面的布局，里面有很多不同大小的图片。

在当前代码中，对过渡有效的唯一更改是可见性，因为我认为如果没有添加距离值，从绝对定位到相对定位的更改不会产生影响？

谢谢你的帮助。:)

4

0 回答 0