css - CSS3过渡

扫码查看

我在这里有此页面(正在进行中)http://kimwilddesigns.com/index_new.htm

在本节中,我希望能够悬停在li上,使背景图像淡出并且使h2淡入。转换是否可能?我可能没有正确设置它,但我想看看这种效果是否可能。

<div id="categories-wrapper">
    <ul>
        <li class="fine-art"><a href="#"><img src="pics/hp_icon_fine-art.jpg" alt="fine art" width="290" height="240" border="0"></a>
            <h2>fine art work</h2>
        </li>
        <li class="gd">graphic design work</li>
        <li class="students">my students' work</li>
    </ul>
</div>

最佳答案

是的,这非常适合CSS过渡,例如:

#categories-wrapper li a {
    position:relative;
    display: block
}

#categories-wrapper li h2 {
    position: absolute;
    left: 20px;
    top: 20px;
    opacity: 0;
}

#categories-wrapper li h2,
#categories-wrapper li img {
    -webkit-transition: opacity .3s ease-in-out;
    -moz-transition: opacity .3s ease-in-out;
    -o-transition: opacity .3s ease-in-out;
    transition: opacity .3s ease-in-out;
}

#categories-wrapper li:hover h2 {
    opacity: 1
}

#categories-wrapper li:hover img {
    opacity: 0
}


参见the Fiddle for this,通过将h2放在a标记内来稍微更改了标记。

关于css - CSS3过渡,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/11728029/

10-12 00:17
查看更多