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

所以我不是专家，但我认为你的问题是这个位置不是一个可动画的属性。您需要指定只希望将转换应用于visibility属性，如下所示：

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

在翻转时淡出图像并淡入文本

1 个答案: