Search code examples
csswebkitzoomingcss-transitionsmask

Css, Html5 zoom in effect , img out of box

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);
}
Solution

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