溢出：隱藏與邊界半徑和CSS變換忽略（僅限webkit）

我想在圓內有一個方形圖像。溢出：隱藏與邊界半徑和CSS變換忽略（僅限webkit）

當用戶將鼠標懸停在圖像上時，圖像應該縮放（放大）。

圓圈應保持相同的大小。

只有在CSS過渡期間，方形圖像與圓形重疊（就像溢出：隱藏根本不存在）。

下面是在Chrome和Safari中的怪異的行爲演示： http://codepen.io/jshawl/full/flbau

在Firefox中工作正常。

來源

2013-06-01 jessh

你是唯一一個我見過的人問這個... kuddos – carinlynchin

我刪除了一些多餘的標記（圓圈和方形容器......只需要一個）和風格的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>

來源

2013-06-01 23:40:02

這個圈子應該保持相同的尺寸 – jessh

看到我的編輯，在jsfiddle中工作就好了Chro我 –

不要過度complecate它這是答案的立場：親戚; z-index：1; –

看來好像你是一個造型太很多元素！我創建了一個fork here

我編輯你的一些SASS代碼，利用指南針庫，並更好地利用transition和transform特性可以在這裏看到：

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

希望這有助於！請將circle元素視爲具有關於空間的一般信息（例如，寬度爲500px，高度爲500px）的父容器。圖像本身有一個圓形邊框500px。這是你想編輯的元素！您可以在這裏縮放和轉換此元素，而無需與父容器circle進行交互。有關使用庫的更多信息，請參考compass！祝你好運！

來源

2013-06-01 23:54:35 djthoms

奇怪的是，添加溢出：隱藏到圖像的作品。它不應該在父母身上嗎？ – jessh

找出最好的方法是嘗試！從'.circle img'中刪除'overflow'屬性，並將其放在'.circle'中並查看結果。你甚至需要「溢出」屬性？ – djthoms

哦，等待我剛纔意識到你的叉子讓圓圈變大了。圓應該保持相同的大小。圖像應該變大 – jessh

您需要將此代碼添加到您的IMG的父：

position:relative; 
z-index:1;

這裏舉例：http://codepen.io/DavidN/pen/dIzJK

來源

2014-10-14 10:13:16

我已經擁有了'position：relative'，但是增加了'z-index：1'來修復它。謝謝！ –

感謝David，這讓我感到很多年。 –

是的，這個解決方案對我來說是一種享受。我沒有使用圓圈，所以不想使用面具。似乎現在看起來很明顯。 – alxrb

將此代碼添加到您的父母股利和解決的問題：

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

來源

2015-10-07 08:29:35

請您詳細說明您的答案，並增加關於您提供的解決方案的更多描述？ – abarisone

溢出：隱藏與邊界半徑和CSS變換忽略（僅限webkit）

回答

相關問題