How to apply effect just to background image and not text - html

Question

I'm searching a way to make an css effect but with exception of not applying the effect to the letters and the buttons (Only to the image), so I need create a rule in css. I can't change the order of the things.
With my code, I get something like this.
This is my code, like you can see I applied some effect in css and this is getting applied to all. I only need it for the image.
.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">
<!-- Here I'm currently Applying the efect -->
<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>
<!-- Here I'm currently Applying the efect -->
</li>
When I apply the effect apply the effect to the letters (h5, h3, p and the button with btn class)
I don't want the effect for them, only for the background-image.
How can I do?

Answer 1

for transition backgrounds use the property background-size, and use background-position to adjust as fits you better
body {
margin: 0
}
.myimage01 {
background-size: 100%;
background-position:center center;
-webkit-transition: .3s ease-in-out;
transition: .3s ease-in-out;
background-image: url(http://lorempixel.com/1600/900);
padding: 40px 30px;
color: #ffffff;
text-align: center;
}
.myimage01:hover {
background-size: 130%;
}
<li id="armonioso-text-2" class="widget widget_armonioso_text">
<div class="armonioso-textwidget-wrapper armonioso-textwidget-no-paddings">
<!-- Here I'm currently Applying the efect -->
<div class="armonioso-textwidget myimage01">
<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>
<!-- Here I'm currently Applying the efect -->
</li>

Answer 2

Use background-size for transition:
div {
background-image: url(http://lorempixel.com/400/200/sports/1/);
background-size: 100%;
background-repeat:no-repeat;
background-position:50% 50%;
width:400px;
height:200px;
transition: background-size 200ms linear;
text-align:center;
line-height:200px;
}
div:hover {
background-size: 120%;
}
<div>
Some text
</div>

Answer 3

try to transform the background-size property instead of scaling the whole container.

Answer 4

You can apply transform on background-size, background-position to get the effect on the background image.
.myimage01 {
background-size:100%;
background-position:0px 0px;
-webkit-transform: all;
transform: all;
-webkit-transition: .3s ease-in-out;
transition: .3s ease-in-out;
}
.myimage01:hover {
background-size:140%;
background-position:-50px -50px;
-webkit-transform: all;
transform: all;
}
<li id="armonioso-text-2" class="widget widget_armonioso_text">
<div class="armonioso-textwidget-wrapper armonioso-textwidget-no-paddings">
<!-- Here I'm currently Applying the efect -->
<div class="armonioso-textwidget myimage01" style="background-image: url(http://dummyimage.com/600x200/000/fff);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>
<!-- Here I'm currently Applying the efect -->
</li>