HTML/CSSを使用してホバー上の画像にテキストを配置する

Question

既存の回答や他のオンラインチュートリアルを見ても、ホバー上の画像上にテキストを配置する方法はまだ分かりません。ここでは、カーソルが画像の上に置いたときに画像がどのように見えるかの例です：次のように

私の現在のコードは次のとおりです。

その現在の状態では

.project { 
 
\t display: flex; 
 
\t flex-direction: column; 
 
\t justify-content: center; 
 
\t align-items: center; 
 
} 
 

 
.project img { 
 
\t margin-top: 3em; 
 
\t width: 27em; 
 
\t height: 25em; 
 
\t position: relative; 
 
} 
 

 
.project img:hover .project p, .project img:hover .project h4 { 
 
\t opacity: 1; 
 
} 
 

 
.project p, .project h4 { 
 
\t background: rgba(0,0,0,0.5); 
 
\t color: white; 
 
\t height: 25em; 
 
\t width: 27em; 
 
\t position: absolute; 
 
\t top: 0; 
 
\t left: 0; 
 
\t opacity: 0; 
 
}

<div id="project_section"> 
 
\t \t <div class="container"> 
 
\t \t \t <div class="row"> 
 
\t \t \t \t <h2>PROJECTS</h2> 
 
\t \t 
 
\t \t \t \t <div class="col-sm-6 project"> 
 
\t \t \t \t \t <img src="https://www.planwallpaper.com/static/images/desktop-year-of-the-tiger-images-wallpaper.jpg" alt=""> 
 
\t \t \t \t \t <h4>Name</h4> 
 
\t \t \t \t \t <p>Put some information here...</p> 
 
\t \t \t \t </div> 
 
\t \t \t 
 
\t \t \t \t <div class="col-sm-6 project"> 
 
\t \t \t \t \t <img src="https://cdn.pixabay.com/photo/2016/03/28/12/35/cat-1285634_960_720.png" alt=""> 
 
\t \t \t \t \t <h4>Namep</h4> 
 
\t \t \t \t \t <p>Put some information here...</p> 
 
\t \t \t \t </div> 
 
\t \t \t </div> 
 
\t \t </div> 
 
\t </div>

、イメージの上にマウスを置くと、テキストはまったく表示されません。私は何が欠けていますか？

Answer 1

キーが「ホバーに」要素を位置決めするためにされていない親に位置を追加し、絶対位置と画像とテキストのdivを作成し、トップ（テキスト）DIVに高いZインデックスを設定します - しかし、あなたはそれをしたいどのようにそれをpositiion、それを表示するには - ホバー上/どちらかJavaScriptで - または不透明度やCSSなど

https://jsfiddle.net/sheriffderek/grkaw0o3/

マークアップ

<div class="parent"> 
    <div class="child"> 
    <span>stuff</span> 
    </div> 
</div> 

の

スタイル

.parent { 
    position: relative; /* define context for absolutly positioned children */ 
    width: 200px; 
    height: 200px; 
    background: red; 
} 

.child { 
    position: absolute; /* position based on boundery created by nearest relative ancestor */ 
    top: 50%; 
    left: 50%; 
    transform: translate(-50%, -50%); 
    background: white; 
} 

今、ホバーと...（同じマークアップ）

https://jsfiddle.net/sheriffderek/ykpacq59/

.parent { 
    position: relative; /* define context for absolutly positioned children */ 
    width: 200px; 
    height: 200px; 
    background: red; 
} 

.parent:after { 
    content: ''; /* :after has to have a content... but you don't want one */ 

    position: absolute; 
    top: 0; 
    right: 0; 
    bottom: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 

    background: rgba(0,0,0,0); 

    transition: 1s; 
} 

.parent:hover:after { 
    background: rgba(0,0,0,.5); 
} 

.parent:hover .child { 
    opacity: 1; 
} 

.child { 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    transform: translate(-50%, -50%); 

    z-index: 5; /* only works when position is defined */ 
    /* think of a stack of paper... this element is now 5 higher than the bottom */ 

    color: white; 

    opacity: 0; 
    transition: .5s; 
} 

Answer 2

z-indexを使用できます。

は

Answer 3

あなたがtaの兄弟セレクタを使用することができますrgetあなたのテキスト要素（私はまた、ブロックレベルの要素にpとh4をラップします。

私はcssがホバー上のノードを動かすことはできないと思います。

Is there a CSS parent selector?

.project img:hover ~ p, .project img:hover ~ h4 { 
    opacity: 1; 
}