Отображать текст при наведении только с использованием CSS

Question

Ничего такого

Когда завис

Как отобразить текст в середине изображения только с помощью CSS.

Спасибо за прочтение.

Answer 1

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:

<a href="#" class="transparent"><span><span>Rocket<br />League</span></span></a>

Answer 2

HTML:

<div id="wrapper">
    <img src="http://placehold.it/300x200" class="hover" />
    <p class="text">text</p>
</div>​

CSS:

    #wrapper.text {
    позиция: относительная;
    внизу:30px;
    Слева направо:0px;
    видимость: скрытый;
    }

    #wrapper:hover .text {
    видимость: видимый;
    }

[Demo][1]

Answer 3

Вы можете попробовать это. Он полностью протестирован и надеюсь, что он поможет вам.

HTML:

<div id="container">
    <img src="https://stackru.com/images/e2a5476f7da89e2eb635f0042d9c05d27d5bd4da.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;
}