Display text when hover only using CSS - html

Question

Nothing
When Hovered
How do I display a text in the middle of the image only using css.
Thanks for reading.

Answer 1

HTML:
<div id="wrapper">
<img src="http://placehold.it/300x200" class="hover" />
<p class="text">text</p>
</div>​
CSS:
#wrapper .text {
position:relative;
bottom:30px;
left:0px;
visibility:hidden;
}
#wrapper:hover .text {
visibility:visible;
}
[Demo][1]

Answer 2

CSS:
a.transparent {
width: 200px;
height: 200px;
background: url("whatever.jpg");
display: block;
text-decoration: none;
}
a.transparent span span{
color:transparent;
}
a:hover.transparent span{
display:block;
width: 200px;
height: 200px;
background:rgba(255,255,255,0.5);
}
a:hover.transparent span span{
display:block;
padding-top: 33%;
text-align: center;
font-size: 1.5em;
line-height: 1em;
background:transparent;
color: #000000;
}
HTML:
<span><span>Rocket<br />League</span></span>

Answer 3

You can try this. It is fully tested and hope it will helpful for you.
HTML:
<div id="container">
<img src="https://i.stack.imgur.com/8ybfu.png" class="hover" />
<p class="title">Rocket<br> League</p>
</div>
CSS:
#container {
position: relative;
width:300px;
}
.title {
position:absolute;
left:50%;
margin-left:-40px;
margin-top: -40px;
right:0;
top:50%;
bottom:0;
font-size: 22px;
color: red;
display:none;
}
#container:hover .title {
display:block;
}