Descripción en una imagen o foto al pasar el ratón

<center><style type="text/css">
.img-side{
background: #E7E7E9;
color: #000000;
width: 305px;
height: 305px;
margin-top:-315px;
opacity: 0;
-webkit-transition:all .5s ease-in-out; }
.img-side:hover{
opacity:.7
}
</style>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvoUR4W9a8E_3D2FfYr9hIbgthyphenhyphenuHdE8-YFNolasLWOnOUE0Rw1LqlSZjIIJIt6MqvyMC8h5uEN7SiimUXharrjyVDNAO6EaIcdDGbr2qBs6flbXX0p0Q5RGhzmq01k67l8F0QmimHy_ee/s1600/yt_logo.png" width="300" />
<br />
<div class="img-side">
<br />
<center><FONT FACE="arial" SIZE=2 COLOR=#000000>AQUI LA DESCRIPCION QUE QUIERES QUE SALGA AL PONER EL RATON SOBRE LA IMAGEN</FONT></center></div></center>