我想在鼠标悬停时显示一些文字

Question

我想在鼠标悬停时显示一些文字。你能帮我吗？如何在图像上隐藏和显示文字？低于我的代码。

.foodMenu {
	text-align: center;
	background-image: url(../img/burger.jpg);
	background-image: url(../img/burger.jpg);
	background-image: url(../img/burger.jpg);
	background-size: cover;
	background-position: center;
	height: 210px;
	width: 280px;
	}

.foodMenu .menuTitle {
	font-size: 22px;
	text-transform: none;
	}
	
.foodMenu .menuTitle:hover {
	
	}

<div class="col span-1-of-4 step_box">
   <div class="foodMenu"><h3 style="color:#ffffff;"    class="menuTitle">Burgers</h3></div>
</div>

IV＆GT;

Answer 1

＆＃13;

＆＃13;

.foodMenu {
	text-align: center;
	background-image: url(../img/burger.jpg);

    /****  Do not repeat your Commands
	background-image: url(../img/burger.jpg);
	background-image: url(../img/burger.jpg);
    ****/

	background-size: cover;
	background-position: center;
	height: 210px;
	width: 280px;
    
    /* positioning to make the text element inside the div */
    position:relative; 
	}

.foodMenu .menuTitle {
	font-size: 22px;
	text-transform: none;

    /** position text element **/
    position:absolute; 
    bottom:0; 
    left:0;
    right:0;

    opacity:0; /* opacity to hide the element */
    background:rgba(0,0,0,.75); /* background for good looking */
    transition:all 0.3s; /* animation effect */
    -webkit-transition:all 0.3s; /* animation effect */
	}
	
.foodMenu:hover .menuTitle {
	opacity:1; /* opacity to show the element on mouse over */
	}

＆＃13;

<div class="col span-1-of-4 step_box">
   <div class="foodMenu"><h3 style="color:#ffffff;"    class="menuTitle">Burgers</h3></div>
</div>

＆＃13;

＆＃13;

＆＃13;