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;
}

小提琴http://jsfiddle.net/XNgV8/

先谢谢，我真的很感激！

Answer 1

您可以使用CSS过渡。这是一个更新的小提琴：

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;
}

Answer 2

您需要在正确的位置使用opacity和easing。 ;）

检查此更新的小提琴：http://jsfiddle.net/XNgV8/1/

（我希望这是你想要的效果。）

如何使用CSS过渡效果

2 个答案: