仅使用CSS

Question

没有

何时悬停

如何仅使用css在图像中间显示文本。

感谢阅读。

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：

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

Answer 3

你可以试试这个。它已经过全面测试，希望对您有所帮助。

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