使用淡入淡出时悬停交换div内容

时间:2017-03-15 11:54:17

标签: html css twitter-bootstrap css3

我希望有一个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>
&#13;
&#13;
&#13;

1 个答案:

答案 0 :(得分:0)

您可以使用CSS过渡来提供淡入淡出效果。我尝试创建像你只使用CSS一样的东西。您还可以使用jquery添加show / hide。转换css来自@Guillermo,here

Check fiddle