html - 在悬停时用淡入淡出交换 div 内容

Question

我希望有一个 div，它只显示一个 h3 标签，它与背景图像垂直对齐，在悬停时显示一个段落文本 block 和按钮，而不是 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