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

问题

I have a sqare image wich 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 dont 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 sqare borders. After the trasition 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. Raphael

回答1:

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>

回答2:

OK, I have a first success: Changing .hopp_circle_img img:hover into .hopp_circle_img:hover fixed the problem in Safari. But it still remains in Chrome.

回答3:

What fixed this issue for me was:

.hopp_circle_img { 
    transform: scale(.99);
}

来源：https://stackoverflow.com/questions/40870652/picture-with-border-radius-50-and-transformscale

标签

css3

transform

scale