How to retain image round corners during transition of image hover zoom in?

Question

DEMO

Image zoom in on hover is easy.
Image round borders is easy.
Combining them, OK, but round corners disappear during transition.
After transition, round corners are back.
Question: How to retain round corners during transition?

.img-wrapper {
    border-radius: 10px;
}

.img-wrapper img {
    transition: transform .5s ease;
    transform:scale(1);
}

.img-wrapper img:hover {
    transform:scale(1.5);
}

score 3 · Accepted Answer · edited May 23 '17 at 11:59

3

try add this:

.img-wrapper {
    border-radius: 10px;
    position:relative;
    z-index:1;
}

if still not worknig, try something from this question: overflow:hidden ignored with border-radius and CSS transforms (webkit only)

edited May 23 '17 at 11:59

Community

1
1

answered Sep 03 '15 at 08:15

Pepo_rasta

2,842
12
20

score 2 · Answer 2 · answered Sep 03 '15 at 08:36

2

add -webkit-mask-image: -webkit-radial-gradient(circle, white, black); to the class img-wrapper and added some style here is the fiddle

answered Sep 03 '15 at 08:36

Krsna Kishore

8,233
4
32
48

@KaFaiLo plz check this and tell me !! – Krsna Kishore Sep 03 '15 at 08:49
This is the first time I see `mask-image`. The answer of Pepo_rasta is tested ok, and simpler. – Ksthawma Sep 03 '15 at 17:10

score 1 · Answer 3 · answered Sep 03 '15 at 08:23

1

Move your border-radius from your wrapper to your image.

.img-wrapper {
    width: 400px;
}

.img-wrapper img {
    border-radius: 10px;
    transition: transform .5s ease;
    transform:scale(1);
}

.img-wrapper img:hover {
    transform:scale(1.5);
}

answered Sep 03 '15 at 08:23

user2968189

81
3

Blue border gone when zoom in. – Ksthawma Sep 03 '15 at 08:29
fiddle: no, the requirement is to see the same visible image dimensions while the image zooms in -- seeing less of the sides of the image. Your fiddle shows the entire image while zooming in, so the visible dimensions change. – Ksthawma Sep 03 '15 at 08:52

How to retain image round corners during transition of image hover zoom in?

DEMO

3 Answers3