圖像懸停與CSS上顯示的圖像

我知道這個問題之前（here和here）詢問，但由於某種原因，我不能讓我的工作時使用相同的技術。基本上，當你將鼠標懸停在此，圖像懸停與CSS上顯示的圖像

你應該得到這樣的：

順便說一句，如果有這樣做沒有徘徊時加載新的圖像一個簡單的方法，請告訴我。

這裏是我的嘗試：

HTML

<div class="image"> 
<a href="#"> 
<img class="image" src="wp-content/themes/TheBullshitCollection/Images/bs-1.jpg"> 
</a> 
</div>

CSS

.image { 
width: 100%; 
margin-right: 28px; 
margin-bottom: 28px; 
display: inline-block; 
} 

.image a:hover { 
display:block; 
background-image:url("/wp-content/themes/TheBullshitCollection/Images/bs-1.5.jpg"); 
margin-right:28px; 
margin-bottom:28px; 
transition: all 0.2s ease-in-out; 
position: absolute; 
z-index:1; 
width: 100px; 
height: 120px; 
}

JS小提琴鏈接：

https://jsfiddle.net/ot8a5oba/

你可以看到是t他的寬度和高度也讓我感到困惑 - 我不確定如何確保它保持相同的尺寸，並且它出現在最上面。提前致謝！

來源

2017-04-26 HappyHands31

是有些事情的照片嗎？ –

@EdmundReed是啊 – HappyHands31

我會這樣做，使用僞元素來應用覆蓋。簡化一些事情。

.imageContainer a { 
 
    width: 100%; 
 
    display: inline-block; 
 
    position: relative; 
 
} 
 

 
.imageContainer a:after { 
 
    position: absolute; 
 
    top: 0; left: 0; right: 0; bottom: 0; 
 
    background: rgba(139,69,19,0.5); 
 
    content: 'Buy'; 
 
    display: flex; 
 
    justify-content: center; 
 
    align-items: center; 
 
    color: white; 
 
    font: 5em cursive; 
 
    opacity: 0; 
 
    transition: opacity .5s; 
 
} 
 

 
.imageContainer a:hover:after { 
 
    opacity: 1; 
 
} 
 

 
.imageContainer img { 
 
    max-width: 100%; 
 
    vertical-align: top; 
 
} 
 

 
/* 
 
.image a:hover { 
 
    display: block; 
 
    background-image: url("http://i.imgur.com/ARiA0ua.jpg"); 
 
    margin-right: 28px; 
 
    margin-bottom: 28px; 
 
    transition: all 0.2s ease-in-out; 
 
    position: absolute; 
 
    z-index: 1; 
 
    width: 100px; 
 
    height: 120px; 
 
} 
 
*/

<div class="imageContainer"> 
 
    <a href="#"> 
 
    <img class="image" src="http://i.imgur.com/F2PaGob.jpg"> 
 
    </a> 
 
</div>

來源

2017-04-27 00:06:03

是的，它的工作原理，但我實際上每行有三個圖像，他們已經失去了他們的利潤率/正確的大小：http://i.imgur.com/VEqUQPw.jpg，http：//i.imgur。 com/4vLBpSz.jpg你也可以看到文本太大，底部覆蓋太多....對不起，我應該發佈我的完整代碼。 JS小提琴鏈接完整的代碼︰https://jsfiddle.net/ot8a5oba/1/ – HappyHands31

我想我可以通過添加'height：105px;寬度：95px;'到'imageContainer img'類，但覆蓋/覆蓋文字太大的問題仍然存在.... https：//jsfiddle.net/ot8a5oba/3/ – HappyHands31

@ HappyHands31 https：/ /jsfiddle.net/ot8a5oba/2/ –

圖像懸停與CSS上顯示的圖像

回答

相關問題