邊界半徑爲50％的圖片和變換（比例）

我有一個sqare圖片，通過使用邊框半徑變成一個圓：50％;迄今爲止效果很好。 ;）但下一步很難做到：我想通過使用transform：scale使圖像變得「更近」。我的意思是：我不想改變圖像的大小，它應該保持相同的直徑。但我想展示圖像的一小部分。這個縮放應該在hover上激活，並且應該在0.8s的時間內處理。邊界半徑爲50％的圖片和變換（比例）

我的代碼在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，787-8）該圖像具有sqare邊框。發生後，他們是圓形的。

2）Safari：轉換時間被忽略，轉換立即發生，沒有「軟」縮放。

3）IE瀏覽器：我不敢看看IE瀏覽器，如果它甚至不能在Safari和Chrome瀏覽器上運行。 ;）

感謝您的想法。我嘗試了很多不同的東西，但都沒有成功。拉斐爾

來源

2016-11-29 rabox66

對於你的第一個問題，答案可以在這裏找到 - http://stackoverflow.com/questions/31693219/issue-while-using-transitions-opacity-change-overflow-hidden/31698580#31698580 – Harry

謝謝，但我該如何解決問題？ iI還試圖在圓上放置一個圖像圖層，以便在成長過程中屏蔽該圓。問題是，面具停止：懸停。所以它或多或少是無用的。 – rabox66

它在那裏的答案是什麼解決方案？**部分和LGSon在這裏提供的答案。他們不幫你解決第一個問題嗎？ – Harry

隨着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>

來源

2016-11-29 16:35:32 LGSon

謝謝你清除我的代碼。儘管如此，它並不適用於Chrome。在你的（清除）代碼中有一個新的z-index-staple。這是什麼解決方案中的建議之一？部分。但它不能解決我的問題。 – rabox66

@ rabox66這個可以在Chrome中使用。確保你沒有忘記'.hopp_circle_img'上的'position：relative;'，這是'z-index'工作所需要的 – LGSon

LGSon。萬分感謝！我會再試一次，但你準備好了所有的東西，所以我只需要複製代碼。也許這是緩存。我實際上使用一個緩存插件來進行wordpress-installtion。這可能很煩人。 – rabox66

行，我有一首成功：更改.hopp_circle_img img:hover到.hopp_circle_img:hover固定在Safari中的問題。但它仍然在Chrome中。

來源

2016-11-29 16:25:17 rabox66

邊界半徑爲50％的圖片和變換（比例）

回答

相關問題