How to add a image zoom effect with a text overlay using css - html

Question

I am trying to get an effect using css which I keep getting 90% right but each time I try something different, it results in another problem elsewhere.
What I am trying to do:
Have the image zoom on mouseover
Have the text remain in place and not zoom
Problem:
The hover works fine EXCEPT when the mouse goes over the text-overlay (because the effect is on img:hover. I effectively want the text-overlay to be visible to the eyes BUT transparent to the mouse-over
Here is my fiddle: https://jsfiddle.net/knrrrfxo/
I have tried making the image a background image but that creates a whole other list of issues with responsive sizing which also wont work.
Code:
<style>
.tile-wrapper {
margin:0;
padding:0;
overflow: hidden;
position: relative;
}
.new-arrivals-link {
line-height: 0;
}
.new-arrivals-link img {
-webkit-transition: all 1s ease; /* Safari and Chrome */
-moz-transition: all 1s ease; /* Firefox */
-ms-transition: all 1s ease; /* IE 9 */
-o-transition: all 1s ease; /* Opera */
transition: all 1s ease;
}
.new-arrivals-link img:hover {
-webkit-transform:scale(1.25); /* Safari and Chrome */
-moz-transform:scale(1.25); /* Firefox */
-ms-transform:scale(1.25); /* IE 9 */
-o-transform:scale(1.25); /* Opera */
transform:scale(1.25);
}
.new-arrivals-link img:hover {
opacity: 0.8;
}
.tile-wrapper .text-overlay {
position: absolute;
width: 50%;
height: 50%;
overflow: auto;
margin: auto;
top: 0;
left: 0;
bottom: 0;
right: 0;
text-align: center;
}
.tile-wrapper .text-overlay h2 {
color: white;
font-size: 60px;
line-height: 74px;
margin: 0 0 10px;
}
.tile-wrapper .text-overlay p {
color: white;
font-size: 28px;
}
</style>
<div class="tile-wrapper">
<a href="#" itemprop="url" class="new-arrivals-link">
<img src="https://cdn.shopify.com/s/files/1/1307/5753/files/new-arrivals-tab.jpg?6713767595666642894" width="100%" alt="New Arrivals">
<div class="text-overlay">
<h2>NEW<br>ARRIVALS</h2>
<p>Shop Now</p>
</div>
</a>
</div>

Answer 1

You can set pointer-events: none; on the .text-overlay div.

Answer 2

All you need is change a single selector to apply to hover of the parent instead of the image element, like so (the changed line is indicated by a comment):
.tile-wrapper {
margin:0;
padding:0;
overflow: hidden;
position: relative;
}
.new-arrivals-link {
line-height: 0;
}
.new-arrivals-link img {
-webkit-transition: all 1s ease; /* Safari and Chrome */
-moz-transition: all 1s ease; /* Firefox */
-ms-transition: all 1s ease; /* IE 9 */
-o-transition: all 1s ease; /* Opera */
transition: all 1s ease;
}
.new-arrivals-link:hover img { /* this line has been changed */
-webkit-transform:scale(1.25); /* Safari and Chrome */
-moz-transform:scale(1.25); /* Firefox */
-ms-transform:scale(1.25); /* IE 9 */
-o-transform:scale(1.25); /* Opera */
transform:scale(1.25);
}
.new-arrivals-link img:hover {
opacity: 0.8;
}
.tile-wrapper .text-overlay {
position: absolute;
width: 50%;
height: 50%;
overflow: auto;
margin: auto;
top: 0;
left: 0;
bottom: 0;
right: 0;
text-align: center;
}
.tile-wrapper .text-overlay h2 {
color: white;
font-size: 60px;
line-height: 74px;
margin: 0 0 10px;
}
.tile-wrapper .text-overlay p {
color: white;
font-size: 28px;
}
<div class="tile-wrapper">
<a href="#" itemprop="url" class="new-arrivals-link">
<img src="https://cdn.shopify.com/s/files/1/1307/5753/files/new-arrivals-tab.jpg?6713767595666642894" width="100%" alt="New Arrivals">
<div class="text-overlay">
<h2>NEW<br>ARRIVALS</h2>
<p>Shop Now</p>
</div>
</a>
</div>
This works because it applies when the parent element of both the image and the text box is hovered over, which is also true if you hover over any of it's child elements.