CODEWITHSUNDEEP
htmlcsstumblrfaderollover
sotorrific
sotorrific

Reputation: 11

Fade image out and fade text in on rollover

This is the website I'm working on: http://threesamples.tumblr.com

I'm having the most idiotic problem, but nothing I try seems to work, so I figured I'd come here.

I'm working with a Tumblr theme that doesn't have support for captions (except when clicking through to the image post itself).

What I'm trying to do is place the caption text inside a div on the top center of the photo, so that on rollover: - photo fades out - text fades in

Here is the CSS I've got so far:

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;

    }

and here is the Tumblr code for dealing with photo posts:

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

I've managed to get the image to fade out, but cannot for the life of me get the text to fade in. Can someone tell me what I'm doing wrong?

Upvotes: 1

Views: 245

Answers (1)

FrozenHarlequin
FrozenHarlequin

Reputation: 31

So I'm not an expert but I think your problem is that position is not an animatable property. You need to specify that you only want the transition to apply to the visibility property, like so:

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;

(Or you should be able to merge it all into one statement for the browser-specific statements, too, but you specifically used transition-duration for those, so I left them that way.)

Source:Using CSS Transitions, CSS Animated Properties

Upvotes: 0

Related Questions