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>