I'm on a quest to find a way to create a CSS effect that only applies to an image, excluding the letters and buttons. I need to establish a rule in my CSS without altering the current structure. The issue arises when my code ends up applying the effect to all elements instead of just the image.
https://i.stack.imgur.com/DD4c0.png
This is my current code, where you can see that the CSS effect is being applied to everything rather than just the image as intended.
.myimage01 {
-webkit-transform: scale(1);
transform: scale(1);
-webkit-transition: .3s ease-in-out;
transition: .3s ease-in-out;
}
.myimage01:hover {
-webkit-transform: scale(1.3);
transform: scale(1.3);
}<li id="armonioso-text-2" class="widget widget_armonioso_text">
<div class="armonioso-textwidget-wrapper armonioso-textwidget-no-paddings">
<!-- This is where the mistake is happening -->
<div class="armonioso-textwidget myimage01" data-style="background-image: url(http:www.myurl.com/image.jpg);padding: 40px 30px ;color: #ffffff;text-align: center;">
<h5>hello world</h5>
<h3>Here how works</h3>
<p>Take a look of new things
<p><a class="btn alt" href="about/index.html" target="_self">About me</a>
</div>
</div>
<!-- This is where the mistake is happening -->
</li>Currently, the effect is being applied to the text elements such as h5, h3, p and the button with the btn class.
My goal is to exclude these elements from the effect and have it apply solely to the background-image.
How can I achieve this?