如何在悬停的图像上显示文字

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

试试这个：

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

<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>

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%); 
}