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 ?
give a positive ratinggive a negative rating
02 Jul 2022 at 07:48 PM

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


.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;


<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>

give a positive ratinggive a negative rating
23 Dec 2022 at 05:35 PM
Share on FacebookShare on TwitterShare on LinkedInSend email
Find us on Facebook
2023 AnswerTabsTermsContact us
How would you rate your experience with AnswerTabs ?
Very badVery good
Thank you for your feedback.