I'm currently grappling with advanced transitions and transforms, and encountering some challenges with a section I'm developing. I've managed to get everything working as needed, except for the fact that there is an h5 element positioned over the image that I don't want to change or transform. However, I do want the image itself to still be able to transform.
You can see a clearer demonstration in this fiddle - http://jsfiddle.net/28m3fpcv/2
And here's the code snippet:
.news-container {
background: #2a2a2a;
width: 90%;
margin: 30px 5%;
}
.news-photo {
float: left;
width: 33.333333333%;
position: relative;
max-height: 200px;
overflow: hidden;
}
.news-photo img {
opacity: 0.5;
max-width: 100%;
display: block;
transition: all 1s ease;
}
.news-photo 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);
}
.news-photo a {
display: block;
transition: all 1s ease;
}
.news-photo h5 {
position: absolute;
top: 50%;
width: 100%;
text-align: center;
margin: 0;
z-index: 20;
font-size: 1.063em;
font-weight: 400;
color: #f1f1f1;
}
HTML:
<div class="news-container cf">
<article class="news-photo">
<a href="#">
<img src="http://placehold.it/1024x576"/>
<h5>Story Title</h5>
</a>
</article>
<article class="news-photo">
<a href="#">
<img src="http://placehold.it/1024x576"/>
<h5>Story Title</h5>
</a>
</article>
<article class="news-photo">
<a href="#">
<img src="http://placehold.it/1024x576"/>
<h5>Story Title</h5>
</a>
</article>
<article class="news-photo">
<a href="#">
<img src="http://placehold.it/1024x576"/>
<h5>Story Title</h5>
</a>
</article>
<article class="news-photo">
<a href="#">
<img src="http://placehold.it/1024x576"/>
<h5>Story Title</h5>
</a>
</article>
<article class="news-photo">
<a href="#">
<img src="http://placehold.it/1024x576"/>
<h5>Story Title</h5>
</a>
</article>
</div>
As you hover over the text, the image's transformation reverts back. Is there any way to prevent this from happening while keeping the heading unchanged? I've tried moving the h5 element outside the anchor tag, but that disabled the clickable functionality. My goal is to have the entire box clickable, keep the h5 element unchanged, and allow the image to transform.
Thanks!
EDIT: To clarify further, the issue is that when hovering over the text, the image's zoom resets, and vice versa. I aim to achieve a hover effect that maintains the image zoom when hovering anywhere within the box, including the text, while leaving the text at its original size.