Geek Answers Handbook

CSS Scale animation also moving image to the left?

I'm trying to create an image gallery that uses CSS animations, but I get some weird effects. I have a smaller thumbnail to get started, and I want it to scale twice when I hover over it. This part works, but it also moves it to the left, and it ends around the edge of the screen. What should I do to fix this?

<style>
    .zoom {
        transition:1s ease-in-out;
    }
    .zoom:hover {
        transform:scale(2);
    }
</style>

<div class="content">
    <div class="zoom">
        <img alt="Paperplane" src="Paperplane.png" style="width: 200px; height: 62px">
        <br> <span class="caption">A paper plane</span>
    </div>
</div>

Demo

+4
source share
3 answers

He does not move left. However, the left edge moves, as does the right. Since your content is left-aligned, it moves to the left.

Demo

You can set the origin of the conversion:

.zoom {
    transition:1s ease-in-out;
    transform-origin: left top;
    background: pink;
}

Demo

.

+8

, , .zoom , .

.zoom, , , . , .

.zoom {
    transition:1s ease-in-out;
    width:200px;
}

, - , , . , transform-origin:left , . , .

: scale(1), . width:400px; transform:scale(.5) transform:scale(1) .

, bad, .

+2

or if you need an immutable image area, you can try adding overflow: a hidden container.

In this example, use the content class before the zoom class:

.content{
    overflow:hidden;
}

http://jsfiddle.net/3b7afm7z/6/

and you can combine both for this example entry:

.content{
    overflow:hidden;
}
.zoom:hover {
    transform:scale(2);
    transform-origin: left bottom;
}

http://jsfiddle.net/3b7afm7z/9

0
source

More articles: