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

Question

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

For your 1st question, the answer is available here - http://stackoverflow.com/questions/31693219/issue-while-using-transitions-opacity-change-overflow-hidden/31698580#31698580 — Harry, Nov 29 '16 at 16:20
Thank you, but how can I resolve the problem? iI also tried to put a layer with an image over the circle in order to mask the circle while it is growing. The problem is, that the mask stops the :hover. So it is more or less useless. — rabox66, Nov 29 '16 at 16:48
It is there in the **What is the solution?** section of that answer and in the answer that LGSon has provided here. Do they not help you solve the first problem? — Harry, Nov 29 '16 at 16:51

score 4 · Accepted Answer · edited May 23 '17 at 12:01

4

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>

edited May 23 '17 at 12:01

Community

1
1

answered Nov 29 '16 at 16:35

Asons

84,923
12
110
165

Thank you for clearing my code. Nevertheless it does not work in Chrome. In your (cleared) code there is a new z-index-staple. That is one of the suggestions in the What is the solution? section. But it does not resolve my problem. – rabox66 Nov 29 '16 at 17:00
@rabox66 This one does work in Chrome. Make sure you didn't forget the `position: relative;` on the `.hopp_circle_img`, which is needed for the `z-index` to work – Asons Nov 29 '16 at 17:03
LGSon. Thank you a lot! I will try it once again, but you prepared everything perfectly for my, so I only had to copy the code. Maybe it is the cache. I actually work on a wordpress-installtion with a caching-plugin. That can be very annoying. – rabox66 Nov 29 '16 at 17:23
OK, it was the caching-plugin. ;) Thank you! – rabox66 Nov 29 '16 at 17:30
there's a functional explaination for this chrome bug. [click here](https://stackoverflow.com/questions/31693219/issue-while-using-transitions-opacity-change-overflow-hidden?answertab=votes#tab-top) – channely Nov 17 '17 at 14:59
@user2435224 Yes, and I have linked to that post...if you click on his name, _Harry's_, in my answer you get there – Asons Nov 17 '17 at 16:04

score 0 · Answer 2 · answered Nov 29 '16 at 16:25

0

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.

answered Nov 29 '16 at 16:25

rabox66

149
2
10

score 0 · Answer 3 · answered Aug 29 '18 at 07:32

0

What fixed this issue for me was:

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

answered Aug 29 '18 at 07:32

toneta

1

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

3 Answers3

Linked