css - 元素 :hover - text and background

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>