overflow: hidden ignorowane przez border-radius i transformacje CSS (tylko webkit)

Chcę mieć kwadratowy obraz wewnątrz okręgu.

Gdy użytkownik znajduje się nad obrazem, obraz powinien być skalowany (powiększany).

Koło powinno pozostać tej samej wielkości.

Tylko podczas przejścia do CSS, kwadratowy obraz pokrywa się z okręgiem (tak jakby overflow: hidden nie było w ogóle).

Oto demo z dziwnym zachowaniem w Chrome i Safari: http://codepen.io/jshawl/full/flbau

Działa ok w Firefoksie.

Author: jessh, 2013-06-02
Source

4 answers

Usunąłem zbędne znaczniki (pojemniki koło i kwadrat... wystarczy jeden) i sam img: 

#wrapper {
  width: 500px;
  height: 500px;
  border-radius: 50%;
  overflow: hidden;
  -webkit-mask-image: -webkit-radial-gradient(circle, white, black);
}

#test {
  width: 100%;
  height: 100%;
  transition: all 2s linear;
}

#test:hover {
  transform: scale(1.2);
}
<div id="wrapper">
  <img src="http://rack.3.mshcdn.com/media/ZgkyMDEzLzA1LzA4L2JlL2JhYmllc193aXRoLjA5NGNjLnBuZwpwCXRodW1iCTg1MHg1OTA-CmUJanBn/8f195417/e44/babies_with_swagg.jpg" id="test">
</div>
 21
Author: Aaron K,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-05-17 06:27:05

Musisz dodać ten kod do rodzica swojego img: 

position:relative;
z-index:1;

Przykład tutaj: http://codepen.io/DavidN/pen/dIzJK

 48
Author: David Nazar,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-10-14 10:13:16

Dodaj ten kod do swojego rodzica div i rozwiąż problem: 

-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
 4
Author: Atakan Goktepe,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-10-07 08:29:35

Wygląda na to, że stylizowałeś o jeden za dużo elementów! Stworzyłem tutaj widelec

Edytowałem część Twojego kodu SASS, aby wykorzystać bibliotekę compass i lepiej wykorzystać właściwości transition i transform, które można zobaczyć tutaj: 

body { padding: 3em; }

.circle {
    height: 500px;
    width: 500px;
    border: 1px solid black;
    @include border-radius(500px);
    overflow: hidden;
}

.circle img {
    height: 500px;
    width: 500px;
    @include transition(all 0.3s ease);
    &:hover { @include transform(scale(1.1)); }
}

Miejmy nadzieję, że to pomoże! Po prostu pomyśl o elemencie circle jako o nadrzędnym kontenerze, który zawiera ogólne informacje o przestrzeni (np. 500px wide i 500px tall). Sam obraz ma zaokrągloną krawędź 500px. To jest element, który chcesz edytować! Można skalować i przekształcać ten element bez interakcji z macierzystym kontenerem circle. Numer kompas aby uzyskać dodatkowe informacje na temat korzystania z biblioteki! Powodzenia!

 2
Author: djthoms,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-06-02 00:11:25