css - CSS トランジションが開始されたときにのみ div にテキストを表示しますか?

Question

私は次のものを持っています：

http://jsfiddle.net/Zf5am/579/

ホバー効果 (透明度) が作動したときにのみテキストを表示しようとしています。これは CSS だけで実現できますか?

.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;
}


}

<div class="image">
  <img class="fade" src="http://www.newyorker.com/online/blogs/photobooth/NASAEarth-01.jpg" alt="" />
  <div class="text">TEST</div>
</div>