交替div內容懸停與淡入淡出

Question

我期待有一個div顯示一個h3標籤垂直對齊與背景圖像的中心，在懸停顯示段落文本塊和按鈕，而不是h3元素（所以一個直接交換）與一個快速淡入淡出的過渡。

我只能看到找到交換其他元素的例子。

任何想法？謝謝！

<div class="col-lg-3"> 
 
<h3>Service Name</h3> 
 
<p>This is the description of the service which explains what it's all about.</p> 
 
<a class="button">Read More</a> 
 
</div>

Answer 1

您可以使用CSS過渡給淡入淡出效果。我試圖創建類似於您使用CSS的問題。你也可以用jquery添加顯示/隱藏。過渡css來自@ Guillermo，給出here。

Check fiddle