elemnt：hover - テキストと背景

Question

イメージを表示するにはテキストを入力する必要があります。また、不透明度に影響を与えるためにも必要です。

は私が探しています。このペン http://codepen.io/anon/pen/NNBgbQ

<div class="flex-menu"> 
<div class="menu-container"> 
<img class="menu-image" src="http://www.libbyroach.ca/wp-content/uploads/2014/11/Adams-Sandwich.jpg" alt="Sandwitch"> 
<div class="menu-description"> 

<h4>Sandwitch</h4> 
<p>Powder marshmallow marshmallow brownie carrot cake candy bonbon. Sweet sugar plum gummies caramels tart carrot cake tiramisu cheesecake. Cheesecake biscuit jelly beans. Jelly-o icing chocolate macaroon. </p> 
</div> 
</div> 
</div> 

結果を見ている：ホバーオーバー

を、画像はその不透明度を変更し、テキストはそれの真ん中に表示されます - 任意のテキストではなく、必要な現在の見出しと段落。

Answer 1

イメージをカバーするテキスト区切りを'position:abolsuteに配置するのが始まりです。

.menu-container divは、position:relativeを取得して測位コンテキストを提供します。

次に、:hoverトリガーをラッパーに切り替えて、両方を同時にトリガーします。 position: absolute;

と画像の上

.flex-menu, 
 
.menu-container, 
 
.menu-image { 
 
    width: 500px; 
 
} 
 
.menu-container { 
 
    position: relative; 
 
} 
 
.menu-description { 
 
    display: none; 
 
    position: absolute; 
 
    width: 100%; 
 
    height: 100%; 
 
    top: 0; 
 
    left: 0; 
 
} 
 
.flex-menu { 
 
    background-color: #fd5c63; 
 
} 
 
.menu-image { 
 
    transition: all 0.3s ease 0s; 
 
    display: block; 
 
} 
 
.flex-menu:hover .menu-image { 
 
    opacity: 0.2; 
 
} 
 
.flex-menu:hover .menu-description { 
 
    display: block; 
 
}

<div class="flex-menu"> 
 
    <div class="menu-container"> 
 
    <img class="menu-image" src="http://www.libbyroach.ca/wp-content/uploads/2014/11/Adams-Sandwich.jpg" alt="Sandwitch"> 
 
    <div class="menu-description"> 
 

 
     <h4>Sandwitch</h4> 
 
     <p>Powder marshmallow marshmallow brownie carrot cake candy bonbon. Sweet sugar plum gummies caramels tart carrot cake tiramisu cheesecake. Cheesecake biscuit jelly beans. Jelly-o icing chocolate macaroon.</p> 
 
    </div> 
 
    </div> 
 
</div>

Answer 2

ポジションテキスト私がよく見えるし、.menu-containerにいくつかのトランジションの変更を.menu-imageから:hoverを移動した：

.flex-menu, 
 
.menu-container, 
 
.menu-image { 
 
    width: 500px; 
 
} 
 
.flex-menu { 
 
    background-color: #fd5c63; 
 
} 
 
.menu-image { 
 
    opacity: 1; 
 
    display: block; 
 
    transition: opacity 300ms ease-in-out; 
 
} 
 
.menu-container:hover .menu-image { 
 
    opacity: 0.2; 
 
} 
 
.menu-container { 
 
    position: relative; 
 
} 
 
.menu-description { 
 
    position: absolute; 
 
    left: 0; 
 
    top: 0; 
 
    z-index: 8; 
 
    transition: opacity 300ms ease-in-out; 
 
    opacity: 0; 
 
} 
 
.menu-container:hover .menu-description { 
 
    opacity: 1; 
 
}

<div class="flex-menu"> 
 
    <div class="menu-container"> 
 
    <img class="menu-image" src="http://www.libbyroach.ca/wp-content/uploads/2014/11/Adams-Sandwich.jpg" alt="Sandwitch"> 
 
    <div class="menu-description"> 
 

 
     <h4>Sandwitch</h4> 
 
     <p>Powder marshmallow marshmallow brownie carrot cake candy bonbon. Sweet sugar plum gummies caramels tart carrot cake tiramisu cheesecake. Cheesecake biscuit jelly beans. Jelly-o icing chocolate macaroon.</p> 
 
    </div> 
 
    </div> 
 
</div>