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; }