elemnt：懸停 - 文本和背景

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定位文本div來覆蓋圖像是一個開始。

.menu-container div得到position:relative來提供定位上下文。

然後將:hover觸發器切換到包裝器以同時觸發兩者。

.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

位置上的文字圖像與position: absolute;

我提出:hover從.menu-image到.menu-container，一些過渡的變化更好看：

.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>