HTML CSS
HOW TO SHOW TEXT OVER IMAGE ON HOVER
1) THE HTML
<div class="wrap"> <img src="IMG.JPG"/> <div class="cap">FOO BAR!</div> </div>
2) TEXT OVER IMAGE
.wrap { position: relative; } .cap { box-sizing: border-box; width: 100%; padding: 10px; position: absolute; bottom: 0; background-color: rgba(0, 0, 0, 0.5); }
3) SHOW ON HOVER
.cap { visibility: none; opacity: 0; transition: opacity 0.3s; } .wrap:hover .cap { visibility: visible; opacity: 1; }