如何在悬停图像上显示文本

Question

我的3张图片都是页面宽度的33％，并排在一起，当它们模糊和生长时，我希望它们在悬停时在中心显示文字，这样我就可以链接到另一页了。

到目前为止

代码：

#banners {
    height:auto;
    font-size:0;
    overflow: hidden;
}
#banners div {
    display: inline-block;
    width: calc(100%/3);
    height: auto;
}
#banners img {
    width:100%;
}
#banners img:hover {
    -webkit-filter: blur(5px);
    -moz-filter: blur(5px);
    -o-filter: blur(5px);
    -ms-filter: blur(5px);
    filter: blur(5px);
    transform:scale(1.1);
}

<div id="banners">
<center>
    <div id="left_img"><img src="http://jackfinn3y.co.uk/RJ-Creative/symmetry/website/assets/images/mac-header.jpg" /></div>
    <div id="mid_img"><img src="http://jackfinn3y.co.uk/RJ-Creative/symmetry/website/assets/images/mac-header.jpg" /></div>
    <div id="right_img"><img src="http://jackfinn3y.co.uk/RJ-Creative/symmetry/website/assets/images/mac-header.jpg" /></div>
</center>
 

Answer 1

试试这个：

＆＃13;

＆＃13;

#banners {
  height:auto;
  font-size:0;
  overflow: hidden;
}
#banners div {
  display: inline-block;
  width: calc(100%/3);
  height: auto;
  position:relative;
}
#banners img {
  width:100%;
}
#banners div:hover img{
  -webkit-filter: blur(5px);
  -moz-filter: blur(5px);
  -o-filter: blur(5px);
  -ms-filter: blur(5px);
  filter: blur(5px);
  transform:scale(1.1);
}
#banners  a{
  display:none;
}
#banners div:hover a {
  color: #fff;
  display: block;
  font-size: 20px;
  left: 50%;
  position: absolute;
  top: 50%;
  text-decoration:none;
  transform: translate(-50%, -50%);
  z-index: 10;
}

＆＃13;

<div id="banners">
<center>
    <div id="left_img"><img src="https://farm5.staticflickr.com/4090/5005738914_a6cefc5e88_z.jpg" /><a href="#">text</a></div>
    <div id="mid_img"><img src="https://s-media-cache-ak0.pinimg.com/736x/4c/e4/dc/4ce4dc320c8ecc17ef8e479de76cb262.jpg" /><a href="#">text</a></div>
    <div id="right_img"><img src="https://d22712ejjhq3e8.cloudfront.net/assets/campaigns/backgrounds/widget/default-282bc74e3142c72f13e3bccecd6c0382.jpg" /><a href="#">text</a></div>
</center>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

使用html

<div id="left_img">
  <div id="content">
  <a href="#">Line 1</a>
  </div>
</div>

使用css

#left_img {
  color: white;
  background: #ffbd17;
  width: 300px;
  height: 300px;
  background-image: url("paper.gif");
}

#content {
  width: 120px;
  margin-left: auto;
  margin-right: auto;
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}