Плавная смена элементов HTML

[WoodStock]

Доброго времени!

Стоит следующая задача: кликаем на картинку а та в свою очередь плавно сменяется (прозрачностью) на div блок с текстом.

Заранее извиняюсь за наглось просить готового решения, но было бы очень здорово. Спасибо.

[рони]

WoodStock,

<style type="text/css">.hot{height:100px;width:100px;border:1px dashed Gray;padding:5px;position:relative;margin:0;padding:0}
.hot div{height:100px;width:100px;transition:all .8s;position:absolute}
.hot .img{background:url(http://f4.mylove.ru/gDbqe0mkIC.png);background-size:cover;opacity:1}
.hot .text,.hot.active .img{opacity:0}
.hot.active .text{opacity:1}
</style>
 <div class="hot" onclick="this.classList.toggle('active')"><div class="text">всякая фигня</div><div class="img"></div></div>