Tutorial: Hover imagem com descrição

Hoje eu vou ensinar para vocês como fazer efeito hover  imagem com descrição.
Hover é quando você passa o mouse em cima de algum item em uma página web e ele muda de cor, fonte, etc.
Então, quando você passar o mouse em cima da imagem, irá aparecer um texto de sua preferência.

• Primeiro você terá que fazer a marcação em HTML:

<div id="efeito-img">
<img src="URL DA IMAGEM" alt="efeito hover imagem com descrição" />
</div>

<div class="desc-efeito">Oat cake marshmallow ice cream fruitcake pie bear claw sugar plum croissant lollipop. Ice cream applicake wafer jelly-o chocolate bar halvah chocolate bar fruitcake tootsie roll. Candy marshmallow</div>

• E o CSS:

#efeito-img{
width: 218px; /*largura da imagem*/
height: 218px; /*altura da imagem*/
}

.desc-efeito{
width: 197px;/*largura do hover*/
height: 118px;/*altura do hover*/
padding: 50px 10px;
opacity: 0;
z-index: 9999;
margin-top: -218px;
cursor: pointer;
color: #000;/*cor da letra*/
font-size: 13px;/*tamanho da letra*/
font-weight: 700;
-webkit-transition: all ease .3s;
-moz-transition: all ease .3s
}

.desc-efeito:hover{
background: #cba219;/*cor do fundo da descrição*/
opacity: 0.9;
position: relative;
-webkit-transition: all ease .3s;
-moz-transition: all ease .3s
}

• Como fica:

Oat cake marshmallow ice cream fruitcake pie bear claw sugar plum croissant lollipop. Ice cream applicake wafer jelly-o chocolate bar halvah chocolate bar fruitcake tootsie roll. Candy marshmallow