CODEWITHSUNDEEP
css
atomant
atomant

Reputation: 49

I want to show some text when make mouse over

I want to show some text when make mouse over. Can you help me please? how can I hide and show text on image? below my code.

.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>

Upvotes: 0

Views: 40

Answers (1)

Abdullah Ramadan
Abdullah Ramadan

Reputation: 182

.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 */
	}
<div class="col span-1-of-4 step_box">
   <div class="foodMenu"><h3 style="color:#ffffff;"    class="menuTitle">Burgers</h3></div>
</div>

Upvotes: 4

Related Questions