csstransformscale

picture with border-radius 50% and transform(scale)

I have a square image which is turned into a circle by using border-radius: 50%; That works quite well so far. But the next step is difficult to do: I want the image to zoom "nearer" by using transform: scale. I mean: I don't want to change the same size of the image, it should stay with the same diameter. But I want to show a small section of the image. The zooming should be activated on :hover and it should be processed during a period of 0.8s

My code works perfectly in Firefox, but in Chrome and Safari it does not. Where are my mistakes?

My HTML:

<div class="hopp_circle_img">
     <img src="... alt="" />
</div>

My CSS:

.hopp_circle_img {    
width: 100% !important;
height: 100% !important;   
max-width: 100% !important;
max-height: 100% !important;
overflow: hidden; 
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
-o-border-radius: 50%;
border-radius: 50%;
}

.hopp_circle_img img {    

   transition: all 0.8s;
-moz-transition: all 0.8s;
-webkit-transition: all 0.8s;
-o-transition: all 0.8s;
-ms-transition: all 0.8s; 
}  
                            
 .hopp_circle_img img:hover {
display: block;
z-index: 100; 
transform: scale(1.25);
-moz-transform: scale(1.25);
-webkit-transform: scale(1.25);
-o-transform: scale(1.25);
-ms-transform: scale(1.25);
     }

The problems:

  1. Chrome: The "zoom" works, but during the transition-time (o,8s) the image has square borders. After the transition took place, they are rounded.

  2. Safari: The transition-time is ignored, transition takes place immediately, without "soft" zooming.

  3. IE: I did not dare to take a look at IE, if it does not even work in Safari and Chrome.

Thanks for your ideas. I tried many different things, none of them worked.

Solution

  • With Harry's suggestion to fix the square, this one should work in Safari as well.

    First, prefixed properties should be before unprefixed, second, don't use all as in

    transition: all ...

    name the properties to be transitioned, in this case

    transition: transform 0.8s

    Note, you need to add back the rest of the prefixed properties

    .hopp_circle_img {
  position: relative;           /*  new property added  */
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  overflow: hidden;
  -webkit-border-radius: 50%;
  border-radius: 50%;
  z-index: 0;                   /*  new property added  */
}
.hopp_circle_img img {
  -webkit-transition: transform 0.8s;    /*  re-ordered property, named      */
  transition: transform 0.8s;            /*  what to be transitioned         */
}
.hopp_circle_img img:hover {
  display: block;
  z-index: 100;
  -webkit-transform: scale(1.25);
  transform: scale(1.25);
}
    <div class="hopp_circle_img">
  <img src="http://lorempixel.com/400/400/nature/1" alt="" />
</div>