border-radius 50％とtransform（scale）の画像

Question

border-radius：50％を使用して円に変換されたsqare画像があります。それはこれまでかなりうまくいっています。 ;）しかし、次のステップはやりにくいです：transform：scaleを使って、画像を「より近くに」ズームします。私は画像の同じサイズを変更する必要はありません、それは同じ直径のままにする必要があります。しかし、私はイメージの小さな部分を示したいと思います。ズームは、ホバー上でアクティブにする必要があります。ホバリングは0.8秒間処理する必要があります

私のコードはFirefoxでは完全に機能しますが、ChromeとSafariでは完全に機能しません。私の間違いはどこですか？

マイHTML：

<div class="hopp_circle_img"> 
    <img src="... alt="" /> 
</div> 

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

問題：
1）クローム： "ズーム" は動作しますが、遷移時間の間、（O、8S）イメージは平らな境界を持っています。移流が行われた後、彼らは丸められます。

2）Safari： 移行時間は無視され、「ソフト」ズームなしですぐに移行が行われます。

3）IE：SafariやChromeでうまく動作しない場合、私はIEを見てみませんでした。 ;）

あなたのアイデアをお寄せいただきありがとうございます。私は多くの異なったことを試みましたが、どれも働いていませんでした。 はSafariで問題を修正し.hopp_circle_img:hoverに.hopp_circle_img img:hoverを変更する： ラファエル

Answer 1

Harry's正方形を修正することをお勧めします。これはSafariでも同様に動作します。

まず、接頭辞プロパティが接頭辞の前にする必要があり、第二、

のよう すべてを使用していない

transition: all ... 

名移行する性質、この場合は

transition: transform 0.8s 

注意残りの接頭辞付きのプロパティを追加する必要があります。

.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>

あなたの第1の質問については

Answer 2

OK、私は最初の成功を持っています。しかし、まだChromeに残っています。