Texte apparaît au passage de la souris

bonjour je souhaiterai que mon texte soit visible mais au moment ou l'ont passe la souris dessu .
je pense avoir bien commencer pour faire apparaître le texte sur une image mais la maintenant je bloque si quelqu’un peux m'aider merci

<div class="boite1">
		<h3 class="h3">Le saut</h3>
		<p>La chute du sot sans son saut</p>
		<input class="saut" name="submit" type="submit" value="Saut"></input>
		</div>

.boite1
{
	width: 480px;
	height: 480px;
	background-image: url(images/saut.jpg);
	border: 1px solid #000000;
	float: left;
	margin-top: 150px;
}

.h3
{
	text-align: center;
	color: #fff;
	margin-top: 200px;
	margin-left: 130px;
}
.saut
{
	cursor: pointer;
	width: 150px;
	height: 40px;
	background-color: #0c7f06;
	text-align: center;
	color: #fff;
	border: none;
	margin-left: 160px;
	font-size: 20px;

}
p
{
	text-align: center;
}

Après moi je veux sans JavaScript