HTML, CSS: Resizing the IMG with transitioning while resizing - html

Question

I've got this code...
<img class="logo" src="img/logo.jpg"> <!-- Logo size is 96x96 -->
...and this
.logo {
transition: .5s;
}
.logo:hover {
transition: .5s;
width: 128px;
height: 128px;
}
It resizes on hovering, but not with transitioning. I just hover it and it instantly resizes, and I have no idea why does transition not work.

Answer 1

There are several things wrong with the CSS causing it not to transition.
First, as #WaisKamal said, you need to set initial states to transition from. Images size automatically in HTML but that's not a valid starting point for CSS.
Second, you need to define WHAT properties are being transitioned.
So you would need to add width and height. Or you can use the all identifier:
.logo {
display:block; //make sure the image is a block element
width: 96px;
height: 96px;
transition: all 0.5s linear;
}
.logo:hover {
width: 128px;
height: 128px;
}
Now that will work but it's going to be kind of janky since animating height/width cause page repaints.
Instead, I would suggest using a transform on the image.
.logo {
display:block; //make sure the image is a block element
// initial size is fine here because we're using a transform
transition: transform 0.5s ease-in-out;
}
.logo:hover {
transform: scale(2) // decimal notation 2 = 200% = 128x128px
}

Answer 2

There is no need to define the same transition property for the image and the hover pseudoclass. If you don't define transition in .logo:hover, it will take the previously set value of half a second.
The problem here is that you must specify an initial width and height for the image in order to have it resize smoothly.