<!DOCTYPE html>
<style>
#square{
position: absolute;
background: black;
width: 200px;
height: 200px;
}
#square #smile{
display: block;
margin: 90px auto;
visibility: hidden;
opacity: 0;
transition: opacity 1s, visibility 1s;
}
#square:hover #smile{
visibility: visible;
opacity: 1;
}
</style>
<div id='square'>
<img id='smile' src='http://javascript.ru/forum/images/smilies/smile.gif'>
</div>