Css, Html5 zoom in effect , img out of box

Question

Image out of box. It seems that is not the right think I do. If anyone can help I would be glad. Thank You! Here You can find Demo

.box { 
width:210px;
height:210px;
border-radius:50%;
border:3px solid yellow;
cursor: default;
overflow: hidden;

}

img{
overflow: hidden;
width:210px;
height:210px;
z-index:-1;
display: block;
position: relative;
-webkit-transition: all 0.6s ease-in-out;
-moz-transition: all 0.6s ease-in-out;
-o-transition: all 0.6s ease-in-out;
 -ms-transition: all 0.6s ease-in-out;
 transition: all 0.6s ease-in-out;

}

.box:hover img{
 -webkit-transform: scale(2);
 -moz-transform: scale(2);
 -o-transform: scale(2);
 -ms-transform: scale(2);
 transform: scale(2);
}

score 1 · Accepted Answer · edited May 23 '17 at 12:05

1

It's seems the problem is only on webkit browsers. I make some research after catch that border-radius property crash the scale transition and I found this

overflow:hidden ignored with border-radius and CSS transforms (webkit only)

You have to put -webkit-mask-image: to the parent div to fix that.

 -webkit-mask-image: -webkit-radial-gradient(circle, white, black);

http://jsfiddle.net/Jx8xF/16/

Edit: And have you attention, that background-size is expensive operation - see this article on Fix 4. Remove background-size CSS property if it slows down your website http://kristerkari.github.io/adventures-in-webkit-land/blog/2013/08/30/fixing-a-parallax-scrolling-website-to-run-in-60-fps/

And finally you can see that zoomin the image is more smooth with scale() css transition method than background-size

EDIT2: code update on http://jsfiddle.net/Jx8xF/19/

Tested on Safari 5.1.7, Chrome, Mozilla, IE10, Opera, Opera Next

As you can see the Safari browser is only who have problems after first fix. For him you need to set

 -webkit-transform: translateZ(0);

And that is not all. You need to group two layers for the border bug, and wrap it with another div. In code you can see the complete fix in HTML and CSS file.

edited May 23 '17 at 12:05

Community

1
1

answered Oct 03 '14 at 18:58

siropo

210
2
14

I agree with you, it is smoother with scale() ,but in your example the yellow border it's affected – Jo Hanna Oct 03 '14 at 19:52
i can't understand you, what about the yellow border? That's isn's my example, it's your. Only change on your code it's adding that line `-webkit-mask-image: -webkit-radial-gradient(circle, white, black);` in .box class. – siropo Oct 03 '14 at 20:11
The yellow border of the circle. When you add the mask it is not ok when hover. See the fiddle that you updated. – Jo Hanna Oct 03 '14 at 20:21
I can't see any problems. Everything seen to works normal - here is a screenshot [link](http://i57.tinypic.com/2s7f775.png) What browser are you using? – siropo Oct 03 '14 at 20:27
Safari, I tested now on Mozilla and it is perfect. Do I need to add a special webkit for Safari to work?right now the border disappear when hover. – Jo Hanna Oct 03 '14 at 20:43
Try this - `-webkit-transform: translateZ(0); -webkit-mask-image: -webkit-radial-gradient(circle, white 100%, black 100%);`. I can't test in safari now. Tomorrow I will. – siropo Oct 03 '14 at 20:56

score 0 · Answer 2 · answered Oct 03 '14 at 18:04

This effect can be better achieved by removing the img element, and instead using the image as a background on the .box element. Then you use transition on the background-size property.

Here is a working example on CodePen. Example code below.

.box { 
  -webkit-transition: all 0.4s ease;
    width:210px;
    height:210px;
    border-radius:100%;
    border:3px solid yellow;
    background: url('http://fc07.deviantart.net/fs71/f/2012/144/b/6/barn_owl_leather_mask_by_teonova_by_teonova-d50xl3v.jpg') center center;
    background-size: 100%;
  }

.box:hover{
    -webkit-transition: all 0.4s ease;
    background-size: 150%;
}

Css, Html5 zoom in effect , img out of box

2 Answers2