Überlauf: Versteckt ignoriert mit border-radius und CSS-Transformationen (nur Webkit)

Möchte ich ein quadratisches Bild in einem Kreis.

Wenn der Benutzer mit der Maus über das Bild, wird das Bild skaliert (zoom-in).

Sollte der Kreis bleibt die gleiche Größe.

Nur bei der CSS-übergang, das Quadrat, das überschneidet sich der Kreis (als wenn overflow:hidden gar nicht da waren).

Hier ist eine demo mit dem seltsamen Verhalten in Chrome und Safari:
http://codepen.io/jshawl/full/flbau

Arbeiten ok in firefox.

InformationsquelleAutor der Frage jessh | 2013-06-01

  1. 48

    Müssen Sie fügen Sie diesen code in das parent-Ihre img : 

    position:relative;
z-index:1;

    Beispiel hier : http://codepen.io/DavidN/pen/dIzJK

    InformationsquelleAutor der Antwort David Nazar

  2. 4

    Fügen Sie diesen code in Ihre übergeordneten div-Element und problem lösen :

    -webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);

    InformationsquelleAutor der Antwort Atakan Goktepe

  3. 2

    Scheint es, als ob Sie waren styling zu viele Elemente! Ich habe eine Gabel hier

    Bearbeitete ich einige eurer SASS-code zu nutzen, der Kompass Bibliothek und der besseren Nutzung des transition und transform Eigenschaften, die hier gesehen werden kann:

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

    Hoffentlich hilft! Man denke nur an die circle element als parent container, in dem Allgemeine Informationen über den Raum (z.B. 500px breit und 500px hoch). Das Bild selbst hat eine abgerundete Grenze 500px. Dies ist das element, das Sie Bearbeiten möchten! Sie können skalieren und transformieren dieses element hier ohne Interaktion mit der übergeordneten circle container. Referenz Kompass für weitere Informationen über die Bibliothek! Viel Glück!

    InformationsquelleAutor der Antwort djthoms

Schreibe einen Kommentar