Display text in a div only when a CSS transition kicks in?

Display text in a div only when a CSS transition kicks in?

I have the following:
http://jsfiddle.net/Zf5am/579/
I'm trying to display the text only when the hover effect (transparency)
kicks in. The text should be full-opacity, very readable, but only on
hover, on top of the opaque image. Can this be done using only CSS?
<div class="image">
<img class="fade"
src="http://www.newyorker.com/online/blogs/photobooth/NASAEarth-01.jpg"
alt="" />
<div class="text">TEST</div>
</div>
.image img {
width:200px;
height:200px;
}
.fade {
opacity: 1;
transition: opacity .25s ease-in-out;
-moz-transition: opacity .25s ease-in-out;
-webkit-transition: opacity .25s ease-in-out;
}
.fade:hover {
opacity: 0.4;
}
.image{
background-color: black;
width: 300px;
}
.text{
color: red;
position: absolute;
top: 10px;
left: 100px;
visibility: hidden;
width: 100%;
height: 100%;
}
.text:hover{
visibility: visible;
}
}