I have a unique design challenge where I have stacked elements - an image, text, and an icon. My goal is to make only the icon animate when any of these elements are hovered over.
<style>
.hvr-forward {
display: inline-block;
vertical-align: middle;
-webkit-transform: perspective(1px) translateZ(0);
transform: perspective(1px) translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-property: transform;
transition-property: transform;
}
.hvr-forward:hover, .hvr-forward:focus, .hvr-forward:active {
-webkit-transform: translateX(15px);
transform: translateX(15px);
}
</style>
<div class="container hvr-forward">
<div class="1"><img src="image.jpg"></div>
<div><p class="2">Some Text <i class="3"></i></p></div>
</div>
While applying the hover effect to the container div affects all elements, I am looking for a solution where only the icon gets animated upon hovering.
Even when I apply the hover effect specifically to the icon, I still want the animation to trigger when users hover over the image or text as well.
Is there a way in CSS to disable the animation on classes 1 and 2 while maintaining the hover area but having class 3 use the effect?
Any assistance or guidance on this matter would be highly appreciated.