Scale image and add text overlay on hover

Question

I have a group of images displayed on beneath the other, made to look as though they're one full image on first glance, but which break up on hover as the images shrink on hover.

Each of these images links to a different page on my website though, so I'd also like to add some text to the centre of each image on hover.

I've found lots of suggestions as to how to add the text, but none that don't break the image transition effect that I already have in place.

<style>
.image4 {
 -webkit-transition: all 0.7s ease;
 transition: all 0.7s ease;
} 

.image4:hover {
-webkit-transform:scale(0.7);
transform:scale(0.7);
}

</style>

<a>
<A HREF="http://philandkaren.weebly.com/the-day.html">
<img class="image4" src="http://philandkaren.weebly.com/files/theme/Homepage1.jpeg">
</a>

<a>
<A HREF="http://philandkaren.weebly.com/getting-there.html">
<img class="image4" src="http://philandkaren.weebly.com/files/theme/Homepage2.jpeg">
</a>

<a>
<A HREF="http://philandkaren.weebly.com/local-information.html">
<img class="image4" src="http://philandkaren.weebly.com/files/theme/Homepage3.jpeg">
</a>

<a>
<A HREF="http://philandkaren.weebly.com/accommodation.html">
<img class="image4" src="http://philandkaren.weebly.com/files/theme/Homepage4.jpeg">
</a>

<a>
<A HREF="http://philandkaren.weebly.com/taxis.html">
<img class="image4" src="http://philandkaren.weebly.com/files/theme/Homepage5.jpeg">
</a>

<a>
<A HREF="http://philandkaren.weebly.com/honeymoon-fund.html">
<img class="image4" src="http://philandkaren.weebly.com/files/theme/Homepage6.jpeg">
</a>


<a>
<A HREF="http://philandkaren.weebly.com/faqs.html">
<img class="image4" src="http://philandkaren.weebly.com/files/theme/Homepage7.jpeg">
</a>

<a>
<A HREF="http://philandkaren.weebly.com/rsvp.html">
<img class="image4" src="http://philandkaren.weebly.com/files/theme/Homepage8.jpeg">
</a>

Does anyone know how I might achieve the text overlay that I'm looking for, whilst retaining the image scaling? Each image is 750 by 128.

You have some very odd mark-up there....you have links in links? — Paulie_D, Aug 04 '16 at 15:16

score 2 · Answer 1 · answered Aug 04 '16 at 15:24

Use the link as a wrapper, with position:relative and add your text content to an absolutely positioned overlay.

Then move the hover trigger to the parent link:

a:hover .image4 {
  -webkit-transform: scale(0.7);
  transform: scale(0.7);
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
.image4 {
  -webkit-transition: all 0.7s ease;
  transition: all 0.7s ease;
  display: block;
}
a:hover .image4 {
  -webkit-transform: scale(0.7);
  transform: scale(0.7);
}
a {
  margin: 1em;
  display: inline-block;
  position: relative;
  text-decoration: none;
  color: white;
}
a .overlay {
  text-decoration: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
  transition: opacity .7s ease;
}
a:hover .overlay {
  opacity: 1;
}

<a HREF="http://philandkaren.weebly.com/faqs.html">
  <img class="image4" src="http://philandkaren.weebly.com/files/theme/Homepage7.jpeg">
  <div class="overlay">
    <h1>OVERLAY TEXT</h1>
  </div>
</a>

Thanks - that's exactly what I'm looking for, except that I now have a gap between each of my images, so when first looking at the page they don't look like one image. Do you know how I might resolve that? I'm a complete beginner, so apologies if I'm starting off from a strange place... — Karen D, Aug 04 '16 at 15:38
That's caused by the white-space for the inline-block elements - http://stackoverflow.com/questions/5078239/how-to-remove-the-space-between-inline-block-elements. — Paulie_D, Aug 04 '16 at 15:43

Scale image and add text overlay on hover

1 Answers1