Transformer Skala und Grenze Radius

Question

Ich versuche hinzufügen Hover-Effekt zu Bild und ich habe ein Problem.

In Firefox ist alles ok:

Aber in Chrome ist ein Problem:

Hier ist mein Code:

<div class="photo"> 
    <img src="images/photo.jpg" alt=""> 
</div> 



.photo { 
    width: 200px; 
    height: 200px; 
    border: 10px solid $white-color; 
    overflow: hidden; 
    position: absolute; 
    bottom: -50px; 
    left: calc(50% - 110px); 
    @include border-radius(50%); 

    img { 
    max-width: 100%; 
    height: auto; 
    @include scale(1); 
    @include transition(.3s ease-in-out); 

    &:hover { 
     @include scale(1.2); 
    } 
    } 
} 

Answer 1

für Chrome verwenden Präfixe für diese spezielle Verwendung -webkit-transform: scale();

auch hinzufügen, es Eigentum zu überführen

für die Zukunft lesen List of CSS vendor prefixes?

Answer 2

<style> 
     .photo{ 
      width: 200px; 
      height: 200px; 
      border: 10px solid #fff; 
      overflow: hidden; 
      position: absolute; 
      border-radius: 50%; 
     } 

     .photo img { 
      max-width: 100%; 
      height: auto; 
      transition(.3 s ease-in-out); 
     } 

     .photo img:hover { 
      transform: scale(1.2); 
     } 


    </style> 

<div class="photo"> 
    <img src="images/photo.jpg" alt=""> 
</div>