html – css在悬停图像时淡出块文本的过渡？

概述所以这是我的代码,当我悬停图像时,我希望使用 css3过渡淡入文本和背景颜色.我已经尝试了很多选择器和过渡类型,但似乎无法得到任何帮助非常感谢. 见下面的演示 http://jsfiddle.net/jiceb/xsFmA/ <a href="#"> <h2>Some Text</h2> <img src="http://www.sheridanrogers.com.au/ 所以这是我的代码,当我悬停图像时,我希望使用 css3过渡淡入文本和背景颜色.我已经尝试了很多选择器和过渡类型,但似乎无法得到任何帮助非常感谢.

见下面的演示

http://jsfiddle.net/jiceb/xsFmA/

<a href="#">      <h2>Some Text</h2>      <img src="http://www.sherIDanrogers.com.au/wp-content/uploads/2011/03/American-pancakes.jpg"/></a>

和CSS

a { position: relative; display: inline-block }a img {    wIDth:250px;}a h2 {    display: none;    position: absolute;    top: 0;    left: 0;    right: 0;    bottom: 0;    margin: 0;    background: black;    color: #fff;}a:hover h2 {    display: block;}

解决方法 而不是使用display：none和display：block,只需使用不透明度并向h2选择器添加转换：

a h2 {    opacity:0; /* Completely invisible. */    Transition:1s; /* A 1 second Transition. */}a:hover h2 {    opacity:1; /* Completely visible. */}

这将导致不透明度在1秒的时间内从0增加到1.

JSFiddle demo.

总结

以上是内存溢出为你收集整理的html – css在悬停图像时淡出块文本的过渡？全部内容，希望文章能够帮你解决html – css在悬停图像时淡出块文本的过渡？所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。