Wie man Text über schwebenden Bildern anzeigt

Question

Meine 3 Bilder sind alle 33% der Breite der Seite und alle nebeneinander, wenn sie schwebten, verschwimmen und wachsen, ich möchte, dass sie Text in der Mitte anzeigen, wenn ich so schwebte kann auf eine andere Seite verlinken.

-Code bisher:

#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

Versuchen Sie folgendes:

#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

Verwendung html

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

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