轉移背景覆蓋懸停

一直使用谷歌搜索一個小時，無法找到答案。你們能幫助我嗎？它主要是做我想做的所有事情，但我想轉換疊加層，而不是讓它進入和退出。我也希望能夠在同一個動作中稍微縮放圖標。如果需要的話，可以打開jquery。提前致謝。附上代碼片段。轉移背景覆蓋懸停

.leftPanel { 
 
    background-color: #fb5757; 
 
    position: absolute; 
 
    height: 100%; 
 
    width: 50%; 
 
} 
 
.leftPanel:hover { 
 
    background-image: url("http://www.soundtrackgeek.com/_WebThemes/pixelation/assets/images/fancybox/fancybox-overlay.png"); 
 
    background-size: cover; 
 
    background-repeat: no-repeat; 
 
} 
 
.rightPanel { 
 
    background-color: #2f2f2f; 
 
    position: absolute; 
 
    height: 100%; 
 
    width: 50%; 
 
    left: 50%; 
 
} 
 
.rightPanel:hover { 
 
    background-image: url(http://2.bp.blogspot.com/-7ddmFBemMJY/UZy726LC2LI/AAAAAAAAC7w/WcwIHoWSSRU/s1600/hex-grid-overlay.png); 
 
    background-size: cover; 
 
    background-repeat: no-repeat; 
 
} 
 
.texts { 
 
    display: inline-block; 
 
} 
 
.texts img { 
 
    display: inline; 
 
    width: 60%; 
 
    margin-top: 45%; 
 
    margin-left: 15%; 
 
}

<div class="leftPanel"> 
 
    <div class="texts"> 
 
    <a href="#"> 
 
     <img src="https://www.globalbrigades.org/media_gallery/thumb/320/0/Dental_2014_Icon_Small.png"> 
 
    </a> 
 

 
    </div> 
 
</div> 
 
<div class="rightPanel"> 
 
    <div class="texts"> 
 
    <a href="#"> 
 
     <img src="https://www.globalbrigades.org/media_gallery/thumb/320/0/Engineering_2014_Icon_Small.png" id="dev-text"> 
 
    </a> 
 

 
    </div> 
 
</div>

來源

2015-05-29 chilledMonkeyBrain

沒有你的搜索'CSS transition'彈出[此頁]（https://developer.mozilla.org/en-US/docs /網絡/指南/ CSS/Using_CSS_transitions）？或[這一個]（https://developer.mozilla.org/en/docs/Web/CSS/transition）？ –

我做過了，但是在試圖轉換bg圖像時，它全部崩潰 – chilledMonkeyBrain

當你得到它的工作時，一個問題就是在dom樹上得到足夠的轉換，所以它轉換出來和好。祝你好運 – Ruskin

這是可以做到打了一下，用僞元素（:before和:after）。

相關CSS：

.leftPanel:after, .rightPanel:after { 
    content: ""; 
    background-size: cover; 
    background-repeat: no-repeat; 
    opacity: 0; 
    top: 0; 
    left: 0; 
    bottom: 0; 
    right: 0; 
    position: absolute; 
    transition: 1s; 
} 
.leftPanel:after{ 
    background-image: url("http://www.soundtrackgeek.com/_WebThemes/pixelation/assets/images/fancybox/fancybox-overlay.png"); 
} 
.rightPanel:after{ 
    background-image: url(http://2.bp.blogspot.com/-7ddmFBemMJY/UZy726LC2LI/AAAAAAAAC7w/WcwIHoWSSRU/s1600/hex-grid-overlay.png); 
} 
.leftPanel:hover:after, .rightPanel:hover:after { 
    opacity: 1; 
} 
.texts{ 
    position: relative; 
    z-index: 1; 
}

檢查：https://jsfiddle.net/lmgonzalves/7pnatg52/2/

來源

2015-05-29 13:02:50 lmgonzalves

這將做到這一點。謝謝！ – chilledMonkeyBrain

轉移背景覆蓋懸停

回答

相關問題