Question

当前示例：DELETED LINK

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;
}

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

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

感谢您的帮助。：）

可变高度范围内的CSS转换＆amp;包含div mouse的标题

0 个答案: