画像上にテキスト付きの不透明なdivを画像上に表示させる（ホバー時）

Question

画像の上にマウスカーソルを移動すると、画像の上に表示されるテキストが表示されます。もともと、私はホバリング時に画像全体が不透明になってしまった。

ここでは、ホバリング時に画像の一部のみを不透明にしたいと決めました。チュートリアルhereを試しました。残念ながら、これらの変更を加えた後は、テキストや不透明なフィルタではなく、画像の上にカーソルを置いても何も表示されません。ここで

私のhtmlファイルされる：

<div class="container"> 
    <div class="main"> 
    <div class = "JFK"> 
     <h6>JFK</h6> 
     <div class = "transbox"> 
      <p> <a href = "#">to</a> 
      <a href = "#">from</a></p> 
     </div> 
    </div> 
/* continues on*/ 

ここでは私のCSSです：

JFK { 
    position: relative; 
    left: 110px; 
    height: 300px; 
    width: 300px; 
    bottom: 40px; 
    background-image: url(https://media-cdn.tripadvisor.com/media/photo-s/03/9b/2d/f2/new-york-city.jpg); 
    line-height: 200px; 
    text-align: center; 
    font-variant: small-caps; 
    display: block; 
} 

.transbox{ 
    margin: 30px; 
    background-color: $ffffff; 
    border: 1px solid black; 
    opacity: 0.6;  
    display: none; 
} 
.JFK h6{ 
    font-size: 30px; 
    font-variant: small-caps; 
    font-weight: 600; 

} 
.transbox p{ 
    position: relative; 
    top: -90px; 
    word-spacing: 100px; 
    font-size: 30px; 
    font-variant: small-caps; 
    font-weight: 600; 
    color: #c4d8e2; 
    display: none; 
} 
.JFK p a{ 
    color: #c4d8e2; 
    top: -30px; 
} 
.JFK:hover transbox p { 
    display: block; 
} 

.JFK:hover{ 
    display: block; 
} 

.JFK: hover transbox{ 
    display: block; 
    opacity:0.6; 
} 

私はhereがtransbox div要素を追加することにより示唆されるように、私はラッパークラスを追加したと思いました。私も背景色を試しました：rgba（255,0,0,0.5）;トリックはhereと言いました。運がない - ホバーには何も起こりません。助言がありますか？

Answer 1

あなたの問題は、あなたのCSSのコードのこれら2枚である：

.JFK:hover transbox p { 
    display: block; 
} 

.JFK: hover transbox{ 
    display: block; 
    opacity:0.6; 
} 

まず.は、クラスtransboxから欠落している - されます.transbox

第2に、.JFK:とhoverの間にスペースがあり、それがすべて機能するはずです。

.JFK:hover .transbox p { 
    display: block; 
} 

.JFK:hover .transbox{ 
    display: block; 
    opacity:0.6; 
} 

Answer 2

コードが完全ではありません。 "チュートリアル"で、あなたが試してみた、<div class = "transbox">は、透明な背景が他のボックスの上に配置され、背景画像付きの単なるボックスです。あなたは、 "ホバリング時に画像の一部だけが不透明になる"必要があると言いました。

また、あなたのCSSは無効です。 "JFK"はクラスで、最初の行は ".JFK"です。

その後、あなたがエラーで再び書いた

.transbox { 
    margin: 30px; 
    background-color: #ffffff; 
} 

です。

を使用でき

：

.transbox{ 
margin: 30px; 
background-color: rgba(255,255,255,0.6); 
border: 1px solid black; 

}