html - 在鼠标悬停时淡出图像并淡入文本

Question

这是我正在处理的网站:http://threesamples.tumblr.com

我遇到了最愚蠢的问题，但我尝试的任何方法似乎都不起作用，所以我想我会来这里。

我正在使用不支持字幕的 Tumblr 主题(点击图片帖子本身时除外)。

我想做的是将标题文本放在照片顶部中心的 div 中，以便在翻转时:- 照片淡出- 文本淡入

这是我目前得到的 CSS:

article.type_photo .photo-stage {
        background: {color:Photo Background};
        position: absolute;

    }

    article.type_photo .photo-stage:hover {
        background: {color: BackgroundColor};
        opacity: 0.5;
        transition: 0.75s;  
        -moz-transition-duration:0.75s; 
        -webkit-transition-duration:0.75s;  
        -o-transition-duration:0.75s;
    }

    article.type_photo .caption-wrap {
        background: transparent;
        width:720px;
        height:300px;
        padding-top:10px;
        position: relative;
        margin: 0 auto;
        float: left;

    }

    article.type_photo .caption {

        visibility: hidden;
        position: absolute;
        margin: 0 auto;
    }


    article.type_photo .caption:hover {

    visibility: visible;
    position: absolute;
    color: #ffffff;
    opacity: 1;
    font-family:"Open Sans";
    font-size:14px;
    text-align: justify;
    transition: 0.75s;  
    -moz-transition-duration:0.75s; 
    -webkit-transition-duration:0.75s;  
    -o-transition-duration:0.75s;

    }

这是处理照片帖子的 Tumblr 代码:

{block:Photo}

        <!-- Photo Post -->


        <div class="photo-stage {select:Image Height}">

        <div class="photo-wrap" style="background-image: url('{PhotoURL-HighRes}');">
                {block:IndexPage}
                    <a href="{Permalink}" title="{Title}"><img src="{PhotoURL-HighRes}" /></a>

        </div>
                {/block:IndexPage}
                {block:PermalinkPage}
                {LinkOpenTag}<img src="{PhotoURL-HighRes}" />{LinkCloseTag}
                {/block:PermalinkPage}

        </div>
        </div>


<div class="caption">
                {block:Caption}
                {Caption} 
                {/block:Caption}
                    {block:Caption Hover}
                    {Caption Hover}
                    {/block:Caption Hover}

</div>

        {/block:Photo}

我已经设法让图像淡出，但我无法让文本淡入。有人能告诉我我做错了什么吗？

Answer 1

所以我不是专家，但我认为你的问题是位置不是动画属性。您需要指定您只希望将过渡应用于可见性属性，如下所示:

transition:visibility 0.75s;
-moz-transition-property:visibility;
-webkit-transition-property:visibility;
-o-transition-property:visibility;
-moz-transition-duration:0.75s; 
-webkit-transition-duration:0.75s;  
-o-transition-duration:0.75s;

(或者对于特定于浏览器的语句，您也应该能够将它们全部合并到一个语句中，但是您专门为这些语句使用了 transition-duration，所以我就这样保留了它们。)

来源:Using CSS Transitions , CSS Animated Properties