html - マウスオーバーされたdivを含む場合の可変高スパンとヘッダーのCSSトランジション

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

上記のさまざまな配置属性は、さまざまなサイズの多数の画像を含むページ全体のレイアウト用です。

現在のコードでは、距離値が追加されていない場合、絶対位置から相対位置への変更が影響を与えるとは思わないため、遷移で有効になる唯一の変更は可視性です?

助けてくれてありがとう。:)