Search code examples
htmlcssimageresizetransition

HTML, CSS: Resizing the IMG with transitioning while resizing

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.

Solution

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