Answer 1, authority 100%
* {
padding: 0;
margin: 0;
}
div {
background: url ('http://moyhutor.net/wp-content/uploads/2012/08/ogurec1.jpg') no-repeat center top;
height: 300px;
width: 300px;
margin: 0 auto;
}
p {
display: none;
font-size: 30px;
font-weight: 700;
font-family: 'Segoe UI';
line-height: 300px;
text-align: center;
color: #fff;
animation: fade .5s linear forwards;
}
@keyframes fade {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
div: hover p {
display: block;
background: rgba (0, 0, 0, 0.5);
cursor: pointer;
}
& lt; div & gt;
& lt; p & gt; Text & lt; / p & gt;
& lt; / div & gt;
Answer 2
A couple of ideas for inspiration (codrops):