css - 如何使用 CSS 过渡效果

Question

我想学习如何使用 css 过渡效果，但我无法弄清楚。我想在我的网站上添加这样的过渡效果 http://themeforest.net/item/smiling-responsive-parallax-one-page-template/full_screen_preview/6185323 (检查投资组合部分)但每次我尝试添加淡入淡出过渡效果时它都不起作用。我不知道我做错了什么。我已准备好标记，但无法使过渡效果发挥作用。有人可以帮我解决这个问题吗？

这是我的标记。

<div class="home-photo-gallery">
<div class="gallery-item-wrap">
    <a href="#"><img src="http://realfood.tesco.com/media/images/juicehero-d2faf7ed-c433-4971-b1fc-b1ff7bf093fe-0-472x310.jpg" /></a>
    <div class="item-text">
        <h4>Orange</h4>
    </div>
</div>

.gallery-item-wrap {
    position: relative;
}

.item-text h4 {
    position: absolute;
    top: 60px;
    width: 100%;
    color: white;
    font-size: 50px;
    text-align: center;
}

.item-text {
    position: absolute;
    width: 472px;
    height: 310px;
    background: rgba(0, 0, 0,0.8);
    top: 0;
    display: none;
}

.gallery-item-wrap:hover .item-text {
    display: block;
    transition: opacity 1s ease-in-out;
}

fiddle http://jsfiddle.net/XNgV8/

提前致谢，非常感谢!

Answer 1

您可以为此使用 CSS 转换。这是一个更新的 fiddle :

http://jsfiddle.net/myajouri/XNgV8/3/

.gallery-item-wrap {
    position: relative;
}

.item-text h4 {
    position: absolute;
    top: 40px;
    width: 100%;
    color: white;
    font-size: 50px;
    text-align: center;
    transition: all 0.5s;    
}

.item-text {
    position: absolute;
    width: 472px;
    height: 310px;
    background: rgba(0, 0, 0,0.8);
    top: 0;
    opacity: 0;
    transition: all 0.3s;
}

.gallery-item-wrap:hover .item-text {
    opacity: 1; 
}

.gallery-item-wrap:hover .item-text h4 {
    top: 60px;
}