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.

Answer 1

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>