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>

​