Untitled

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Pizzaria</title>
<style>
*{
margin:0 auto;
padding:0 auto;
margin-top:50px;
}

#conteudo{
width:90%;
height:auto;
padding:10px;
position:relative;
}

#imagem_produto{
width:260px;
height:180px;
border:solid 5px #333;
position: relative;
}

#descricao_produto{
width:260px;
height:180px;
position:relative;
top:-50px;
padding:1px;
background-color:rgba(1,0,0,.60);
color:#fff;
display: block;
opacity: 0;
transition:0.1s;
}

#imagem_produto:hover  #descricao_produto{
	  opacity:1;
	  transition:0.1s;
}

</style>
</head>

<body>
<div id="conteudo">
<div style="width:270px; margin-bottom:-50px;  height:20px;">
<div style="">NOME DO PRODUTO</div></div>
<div id="imagem_produto" style="background:url(imagem.jpg); background-position:35%;">

	<div id="descricao_produto">
    DESCRIÇÃO DO PRODUTO

    </div>

</div>
</div>
</body>
</html>