I am working with HTML code that includes an image and text
<div class="subcontainer1">
<img src="a.png" alt="" class="imgcolumn">
<h3 class="header3">Hello</h3>
</div>
This setup places the content above the image.
I'm attempting to apply two different CSS effects on a single hover event.
Specifically, when hovering over a div with the class subcontainer1, I want the image to shrink and the text to grow.
CSS for shrinking and growing elements:
.grow {
display: inline-block;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-property: transform;
transition-property: transform;
-webkit-transform: translateZ(0);
transform: translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
.grow:hover, .grow:focus, .grow:active {
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
/* Shrink */
.shrink {
display: inline-block;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-property: transform;
transition-property: transform;
-webkit-transform: translateZ(0);
transform: translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
Is it possible to achieve this effect on hover, or am I setting my expectations too high?