マウスオーバー時にテキストを表示したい

Question

マウスオーバー時にテキストを表示したい。私を助けてくれますか？画像にテキストを隠して表示するにはどうすればいいですか？私のコードの下に。

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

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

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

IV>

Answer 1

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

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

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

 
.foodMenu .menuTitle { 
 
\t font-size: 22px; 
 
\t 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 */ 
 
\t } 
 
\t 
 
.foodMenu:hover .menuTitle { 
 
\t opacity:1; /* opacity to show the element on mouse over */ 
 
\t }

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