將鼠標懸停在圖像上時，在div /文本中覆蓋/淡入

我有一個<img>，我希望能夠將鼠標懸停在上面，並且將鼠標懸停在其上時，我可以在div或文本中設置動畫或淡入以顯示各種信息。顯示的信息將疊加在圖像上。
我以前在網站上看到過這樣做，我不記得或放置在我看過的地方，但這個想法在我的腦海中非常清晰。將鼠標懸停在圖像上時，在div /文本中覆蓋/淡入

對不起，我沒有任何好的嘗試，我已經閱讀，找不到任何適合我的想法的東西。

我還沒有完全理解JS，但我可以想出一些想法來嘗試使它工作。我只需要一點幫助，讓我走向正確的方向，然後我自己嘗試着去做其餘的事情。

我的第一個想法是直接刪除圖像，然後將其替換爲帶有覆蓋文本的background-image中的圖像的div。

document.getElementById("imageBox").onmouseover = function() { 
 
    imageMouseOver()}; 
 
var image = document.getElementById("imageBox"); 
 
var textHere = imagine a lot of html here; 
 
function imageMouseOver() { 
 
    document.getElementById("imageBox").parentNode.removeChild(image); 
 
    document.getElementById("imageBox").add(textHere); 
 
};

以上不工作，和我的其他想法將根據離最初的一，例如： -instead移除圖像中，有圖像的不透明度減少和增加一些東西來模擬效果 - 或者，有opacity:0到實際的覆蓋層來隱藏它，onmouseover，只是使它出現opacity:1和transition: opacity 200ms ease？

對不起，我在這裏問的太多了，但我幾乎無法從哪裏開始，有人能指點我一個地方爲我開始？理想情況下，一些例子會很好，或者一個網站解釋它會很棒！

來源

2017-04-09 Mark

下面是使用文本元素的:hover到transitionopacity的CSS示例。

.wrap { 
 
    display: inline-block; 
 
    position: relative; 
 
    padding: 1em; 
 
    background: #fff; 
 
    box-shadow: 0 2px 3px rgba(0,0,0,0.5); 
 
} 
 
.text { 
 
    background: rgba(0,0,0,0.8); 
 
    color: #fff; 
 
    transition: opacity .5s; 
 
    opacity: 0; 
 
    position: absolute; 
 
    top: 1em; bottom: 1em; left: 1em; right: 1em; 
 
    display: flex; 
 
    justify-content: center; 
 
    align-items: center; 
 
} 
 
.wrap:hover .text { 
 
    opacity: 1; 
 
} 
 
img { 
 
    max-width: 100%; 
 
    display: block; 
 
}

<div class="wrap"> 
 
    <img src="http://kenwheeler.github.io/slick/img/fonz1.png"> 
 
    <div class="text">text overlay</div> 
 
</div>

來源

2017-04-09 02:43:40

將鼠標懸停在圖像上時，在div /文本中覆蓋/淡入

回答

相關問題