Fade image out and fade text in on rollover - html

Question

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}
<img src="{PhotoURL-HighRes}" />
</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?

Answer 1

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