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>