画像の上にマウスを乗せたときにdiv/text内でオーバーレイ/フェードします

Question

私はマウスオーバーすることができるようにしたいと私は<img>を持っています。そして、その上にマウスを置くと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); 
 
}; 
 

上記動作しない、と私の他のアイデアは、たとえば、最初の1のオフに基づいて次のようになります。画像を除去する -instead、画像の不透明度を持っていますそれを隠すために実際のオーバーレイにopacity:0を持っていて、opacity:1とおそらくtransition: opacity 200ms easeと表示されますか？

私はここであまりにも多くのことを求めていますが、どこから始めればいいですか？理想的には、いくつかの例が良いだろうか、それを説明するサイトが素晴らしいだろう！

Answer 1

ここでは、テキストエレメントの: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>