How to display text over hovered images

Question

My 3 images are all 33% of the width of the page and all side by side, when hovered they blur and grow, I would like them to display text in the center when hovered so I can link to another page.

Code so far:

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

score 0 · Accepted Answer · answered Jun 03 '17 at 10:46

Try this:

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

https://stackoverflow.com/questions/1798817/why-is-the-center-tag-deprecated-in-html#1798853, center tag is deprecated. Maybe use a dive with the class centered? — Persijn, Jun 03 '17 at 11:14

score 0 · Answer 2 · answered Jun 03 '17 at 10:47

use html

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

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

How to display text over hovered images

2 Answers2