Enlarge link image on hover without moving other DIV - CSS

I would like to smoothly enlarge a link image on hover. How can I make it work using CSS, without impact on other div elements ?

Hi,

To smoothly enlarge image link, without moving other elements, you can use the following CSS solution:

<style>

.enlarge {
float: left;
background-color: #d8f6fe;
border-radius: 4px;
margin: 10px;
padding: 10px;
text-decoration: none;
color: #000000;
font-family: Arial;
font-size: 18px;
text-align: center;
width: 100px;
height: 100px;
transition: 0.4s;
-webkit-transform: scale(1);
transform: scale(1);
position: relative;
display: flex;
flex-direction: column;
justify-content: center;
-webkit-transition: all .5s ease 0;
transition: all .5s ease 0;
}

a.enlarge:hover {
color: #000000;
-webkit-transform: scale(1.06);
transform: scale(1.06);
-webkit-transition: all .5s ease 0;
transition: all .5s ease 0;
}

</style>

<a href='' class='enlarge'><img src='image_1.png' alt='first' /></a>
<a href='' class='enlarge'><img src='image_2.png' alt='second' /></a>
<a href='' class='enlarge'><img src='image_3.png' alt='third' /></a>