Плавное исчезновение картинки при наведении

Недавно спрашивали - /ru/forum/comment/11901375 , но там кнопка "Плей" появляется при наведении, переделать нужно будет.

ExVood:
Здравствуйте ув. специалисты!
Возникла необходимость сделать плавное исчезновение картинки, которая перекрывала бы другую.
Как для примера:
Я хочу чтоб картинка с изображением кнопки "Play" исчезала, при наведении на все основное изображение. Само изображение естественно кликабельно.



Как такое можно реализовать? Можно ли с помощью CSS? Заранее спасибо.

<a href="#" class="image">

<img src="#" alt />

<span></span>

</a>

<style>

.image {display:block;overflow:hidden;cursor:pointer;position:relative;}

.image > span {position:absolute;top:0;left:0;display:block;background:url(play.png) center center no-repeat;opacity:1;transition: all .5s;}

.image:hover > span {opacity:0;}

</style>