Scaling image with CSS Transition

Question

This is how I want to scale my images, smoothly without any jumps.

My attempt does not work like in the gallery above, the image (red square in my case) jumps, my code:

section {
    background-color: rgba(0, 0, 0, 0.701961);
    width: 400px;
    height: 400px;
}

div {
    position: absolute;
    top: 120px;
    left: 120px;
    width: 160px;
    height: 160px;
    background-color: red;
    -webkit-transition: all .2s ease-in-out;

}

div:hover {
    -webkit-transform: scale(1.8);
}

<section>
    <div></div>
</section>

How to fix this? The red square jumps. Is it possible to scale smoothly with CSS Transition at all like in the gallery in the link at the beginning?

score 12 · Accepted Answer · edited Jul 25 '20 at 18:18

12

What do you mean by "jumps"? Try this, jumps too?

section {
    background-color: rgba(0, 0, 0, 0.701961);
    width: 400px;
    height: 400px;
}

div {
    position: absolute;
    top: 120px;
    left: 120px;
    width: 160px;
    height: 160px;
    background-color: red;
    -webkit-transition: -webkit-transform 0.4s;
    transition: transform 0.4s;
}

    div:hover {
        -webkit-transform: scale(1.8) rotate(0.01deg);
        transform: scale(1.8) rotate(0.01deg);
    }

<section>
    <div></div>
</section>

Also, you could try the variant with a container for an image (like in the first link of your question).

JSFiddle

.banner {
    position: relative;
    z-index: 1;
    cursor: pointer;
    border: 1px solid #dfe2e5;
    background: #000;
    width: 310px;
    height: 150px;
    -webkit-transition: border-color 0.1s;
    transition: border-color 0.1s;
    overflow: hidden;
}

    .banner:hover {
        border-color: #bdc1c5;
    }

    .banner__image-container {
        overflow: hidden;
        height: 100%;
    }

    .banner__image {
        -webkit-transition: all 0.4s;
        transition: all 0.4s;
    }

        .banner:hover .banner__image {
            -webkit-transform: scale(1.15) rotate(0.01deg);
            transform: scale(1.15) rotate(0.01deg);
            opacity: 0.5;
        }

<div class="banner">
    <div class="banner__image-container">
        <img class="banner__image" src="https://picsum.photos/310/150/?image=1022"/>
    </div>
</div>

edited Jul 25 '20 at 18:18

Emdadul Sawon

5,730
3
45
48

answered Aug 16 '15 at 10:17

sergdenisov

8,327
9
48
63

It still jumps in my Chrome version (44.0.2403.155 m), on Windows 7. Not always, but if you repeatedly hover - unhover, in some cases it will make a sudden change in dimension. I believe it is a bug in newer Chrome versions. – vals Aug 16 '15 at 10:58
@vals maybe. I think it's OK in the first example of the question because an image has a container. – sergdenisov Aug 16 '15 at 11:03
@vals for example, I did something like that for my company, does it jump too? http://jsfiddle.net/sergdenisov/o1ztj3o0/ – sergdenisov Aug 16 '15 at 11:22
Yes, it jumps, but it is less noticeable because the scale is lower. But I do believe it is a bug, and probably it is not reproducible in other settings – vals Aug 16 '15 at 11:31
@Sergey Denisov indeed in the first example of the question an image has a container but does the sole reason of having the container change anything, could you expand on what difference does image having a container bring ? I suppose the problem is Chrome, – Piotr Aug 16 '15 at 11:33
@Piotr when you have a container, you apply `:hover` styles by cascade, like in my example: `.banner:hover .banner__image { ... }`. And a container has `overflow: hidden`. So, real size of your block isn't changing because image scales inside fixed sized container. I think it could fix "jumping". http://jsfiddle.net/sergdenisov/o1ztj3o0/ – sergdenisov Aug 16 '15 at 11:43
Ok, I will give it a shot. and how to apply color change at the same time like in that gallery http://themes.themegoods2.com/keres/gallery-4-columns/ ? – Piotr Aug 16 '15 at 11:49
Sergey Denisov Thanks a lot man the second code you sent me http://jsfiddle.net/sergdenisov/o1ztj3o0/1/ seems to have solved both issues for me in chrome (but maby it is temporary that it works without jumps. – Piotr Aug 16 '15 at 13:33
@Piotr thanks. I improved my answer, added the latest code snippet which suits to you. – sergdenisov Aug 17 '15 at 12:17

score 1 · Answer 2 · answered Apr 27 '20 at 11:14

1

I sometimes solve strange jumps on transition by adding rotate(0.01deg) on the transform property, like so:

.element:hover {
    transform: scale(1.5) rotate(0.01deg);
}

answered Apr 27 '20 at 11:14

Fred K

13,249
14
78
103

Scaling image with CSS Transition

2 Answers2

Linked