Problem of blurring background image (svg) while using scale on hover - html

Question

I need to zoom image in on hover and focus. On hover from .9 to 1 and on focus from 1 to 1.2.
The problem is that while scaling, the picture is blurry. No matter what size I start with, .9 or 1.
I used two solutions:
transform: scale3d(.9, .9, .9);
transform: translateZ(0) scale (.9, .9);
But it didn't work (solution in snippet).
What am I doing wrong? Maybe there are other solutions?
.button {
border: none;
background-color: transparent;
background-size: 100%;
background-position: center;
background-repeat: no-repeat;
background-image: url('https://svgshare.com/i/FWE.svg');
width: 28px;
height: 36px;
transition: transform .3s ease, background .3s ease, opacity .2s ease;
box-shadow: none;
will-change: transform;
transform: scale3d(.9,.9,.9);
transform: translateZ(0) scale(.9, .9);
}
.button:hover {
cursor: pointer;
transform: scale3d(1,1,1);
transform: translateZ(0) scale(1, 1);
}
.button:focus {
outline: none;
transform: scale3d(1.2,1.2,1.2);
transform: translateZ(0) scale(1.2, 1.2);
}
<button class="button">
</button>
<button class="button">
</button>

Answer 1

You could put the image into a pseudo element and transition the size of that element - that way you will always keep a sharp svg (seems a lot sharper than any of the other ways we discussed in the comments):
.button {
cursor: pointer;
outline: none;
border: none;
width: 36px;
height: 36px;
background-color: transparent;
box-shadow: none;
position: relative;
}
.button:after {
content: '';
display: block;
background: url('https://svgshare.com/i/FWE.svg') center center no-repeat;
background-size: contain;
width: 26px;
height: 26px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
transition: all .15s linear;
}
.button:hover:after {
width: 30px;
height: 30px;
}
.button:focus:after {
width: 34px;
height: 34px;
}
<button class="button">
</button>
<button class="button">
</button>