CSS - 在圓角圖像上懸停後修復邊緣

我創建了div元素，並且我還添加了border-radius屬性，以使div更美觀。我還爲div添加了-webkit-transition: opacity .25s ease屬性，以便在用戶懸停在div之上時創建向黑色疊加層的轉換。然後，我遇到了這些圖像可以解釋的問題。CSS - 在圓角圖像上懸停後修復邊緣

光標div元素外：

enter image description here

移動光標的div的元素： enter image description here

光標是完全的div的元素： enter image description here

所以，我想這是過境的問題離子，它是由圖像的圓角邊緣造成的。這有點煩人，我想刪除它，但我不知道如何。我已在此附上代碼：

注意：.memX（其中X是數字）是指每個div元素。有像10 .mem元素。

mem1, .mem2, .mem3, .mem4, .mem5, .mem6, .mem7, .mem8, .mem9, .mem10 { 
    height: 200px; 
    width: 200px; 
    margin: 0px 31px; 
    display: inline-block; 
    border-radius: 10px; 
    border: solid; 
    border-width: thin; 
    border-color: #d6d6d6; 
    overflow: hidden; 
} 

.overlay { 
    background: rgba(0,0,0,.4); 
    text-align: center; 
    height: 100px; 
    width: 100%; 
    padding: 45px 0px 66px 0px; 
    opacity: 0; 
    -webkit-transition: opacity .25s ease; 
    -moz-transition: opacity .25s ease; 
} 

.insidetext { 
    font-family: "Source Sans Pro", Helvetica, Arial, sans-serif; 
    font-weight: lighter; 
    color: rgba(255,255,255,.85); 
    font-size: 1.5em; 
    margin-top: 35px; 
} 

.mem1:hover .overlay, .mem2:hover .overlay, .mem3:hover .overlay, .mem4:hover .overlay, .mem5:hover .overlay, .mem6:hover .overlay, .mem7:hover .overlay, .mem8:hover .overlay, .mem9:hover .overlay { 
    border-radius: 10px; 
    opacity: 1; 
} 

.mem1 { 
    background-image: url(members/giles.png); 
}

這似乎是一個普遍的問題。你可以在CodePen上看到這個特別的問題：http://codepen.io/ianfarb/pen/ikeAf

來源

2015-07-19 Shrey

嘗試使用這個..

body { 
    background: #e7e7e7; 
} 

#box { 
    width: 300px; 
    height: 200px; 
    box-shadow: inset 1px 1px 40px 0 rgba(0, 0, 0, .45); 
    border-bottom: 2px solid #fff; 
    border-right: 2px solid #fff; 
    margin: 5% auto 0 auto; 
    background: url(http://ianfarb.com/wp-content/uploads/2013/10/nicholas-hodag.jpg); 
    background-size: cover; 
    border-radius: 5px; 
    overflow: hidden; 
    position: relative; 
} 

#overlay { 
    background: rgba(0, 0, 0, .75); 
    text-align: center; 
    /*padding: 45px 0 66px 0;*/ 
    display: table; 
    width: 100%; 
    height: 100%; 
    opacity: 0; 
    border-radius: 5px; 
    -webkit-transition: opacity .25s ease; 
    -moz-transition: opacity .25s ease; 
} 

#box:hover #overlay { 
    opacity: 1; 
} 

#plus { 
    font-family: Helvetica; 
    font-weight: 900; 
    color: rgba(255, 255, 255, .85); 
    font-size: 96px; 
    display: table-cell; 
    vertical-align: middle; 
}

http://codepen.io/anon/pen/VLBqvE

來源

2015-07-19 17:26:15 ChamathD

嗯我很困惑，爲什麼你有這麼多的mem類。類名可以重用，ID選擇器不能。那麼爲什麼有.mem1等等，當你可以簡單地有.mem？

無論如何，要解決您的問題，所有您需要做的是將border-radius:5px;添加到#overlay，這應該給你你想要的效果。

來源

2015-07-19 16:58:49 jaunt

我'邊境radius'是10px的，而不是爲5px。此外，我嘗試了這一點，它刪除了前兩個鋒利的邊緣，但不是底部的兩個。 – Shrey

我的例子中，你有兩個DIV一個是父（盒），另一種是冷凍（疊加）和應用邊框父母和你的懸停效果是冷，所以當你將鼠標懸停它將適用於冷凍過渡。並且冷凍沒有border-radius：5px; so apply border-radius：5px;也給你的冷凍ID。所以，我認爲它的溢出問題

不過你可以試試這個soluttion：

的解決方案是從過渡然後它的作品，因爲除去延遲延緩它會給你的問題。

看到這個例子，以消除從轉換延遲：http://jsfiddle.net/9phk87x8/我認爲它會爲你工作。

#overlay { background: rgba(0, 0, 0, .75); text-align: center; padding: 45px 0 66px 0; opacity: 0; -webkit-transition: opacity ease; -moz-transition: opacity ease; }

來源

2015-07-19 17:23:58

CSS - 在圓角圖像上懸停後修復邊緣

回答

相關問題