Texto por cima de imagem

[ProgramadorBR]

Como colo um texto por cima da imagem, assim que “eu usar passar o mouse por cima dela” - sei que é usando um “hover” mas como não sei…
html

<div id ="colproduto" class="col-lg-3 col-sm-12 col-md-3"> 
       <h4>Picanha Grill</h4>
        <img class="img-fluid" src="carnes/picanhagrill.jpg">
</div>

css:

#colproduto{

	text-align: center;
	margin-top: 3%;
	border: 1px solid #f3f3f3;
	height: 220px;
	margin-left: 2%;

	border-radius: 5px;
}

#colproduto img{
	padding-top: 5% !important;
	width: 170px;
	height:auto;
}

#colproduto a{
	text-decoration: none !important;
	cursor: pointer;
	color: #3d3d3d;

}
#colproduto:hover{
	 	-webkit-transform: scale(1.1);
        -ms-transform: scale(1.1);
        transform: scale(1.1);
}

[vanribeiro]

Olha, em alguns posts, vi algo semelhante a isso:

HTML:

<div id ="colproduto">
     <h4>Picanha</h4>
     <img class="img-fluid" src="img/cow.png" title="Picanha">
     <h1>R$ 30,00</h1>
</div>           

CSS:

a h1{
    padding: 10px;
    display: none;
    position: absolute;
    bottom: 0;
}

a:hover h1{
    display: block;
    background-color: rgba(0, 0, 0, 0.493);
}

Talvez não seja o ideal, mas pode te dar uma ideia de como fazer. Aqui ficou assim: