Question

我的标题和描述都很少。我想把标题和描述放在图像后面，当我悬停在图像上时，图像消失，标题和描述出现。

我已经做了一些事情，但我不能继续。

这是html代码：

<div class="views-field-field-contest-image">
  <a href=""> <img>....</img> </a>
</div>
<div class="views-field-title">
  <p>("title")</p>
</div>
<div class="views-field-field-description">
  <p>("description")</p>
</div>

这是css代码：

.views-field-field-contest-image {
    border: 1px solid #ddd;
    display: block;
    height: 250px;
    overflow: hidden;
    width: 250px;
}

.views-field-field-contest-image:hover img {
    display: none;
}

.views-field-title {
    display:none;
}

.views-field-field-description {
    display:none;
}

.views-field-title:hover {
    display: block;
    text-align: center;
    margin: 20% 0 0;
}

问题是标题和描述“隐藏”在图像下而不是在后面，我不能让它们出现在悬停

Answer 1

我将图片用作背景图片，并在<a />标记中添加说明/标题。在悬停时（在整个div上），隐藏背景图像并显示组件：

<style>
.views-field-field-contest-image {
  border: 1px solid #ddd;
  display: block;
  height: 250px;
  overflow: hidden;
  width: 250px;
  background-image: url("...");
}

.views-field-field-contest-image:hover  {
  background-image: none;
  cursor: pointer;
}

.views-field-title {
  display:none;
  text-align: center;
  margin: 20% 0 0;
}

.views-field-field-description {
  display:none;
}

.views-field-field-contest-image:hover .views-field-title,
.views-field-field-contest-image:hover .views-field-field-description 
{
  display: block;
}
</style>

<div class="views-field-field-contest-image">
  <a href="#">  
    <div class="views-field-title">
      <p>("title")</p>
    </div>
    <div class="views-field-field-description">
      <p>("description")</p>
    </div>  
  </a>
</div>

示例CodePen：http://codepen.io/paulroub/pen/pEwyq

Answer 2

你也可以玩定位：

HTML

<div class="view-content">
    <div class="views-field-field-contest-image">
      <a href=""> <img src="http://lorempixel.com/250/250/technics">....</img> </a>
    </div>

    <div class="views-field-title">
      <p>("title")</p>
    </div>

    <div class="views-field-field-description">
      <p>("description")</p>
    </div>
</div>

CSS

.views-field-field-contest-image {
    border: 1px solid #ddd;
    display: block;
    height: 250px;
    overflow: hidden;
    width: 250px;
}

.views-field-field-contest-image:hover img {
    -webkit-transition: opacity .2s;
    -moz-transition: opacity .2s;
    opacity: 0.2
}

.view-content{width: 250px; height: 250px; position: relative; }
.views-field-title, .views-field-field-description{ width: 250px; height: 250px; position: absolute; top: 0; z-index: -1; text-align: center; line-height: 1em;}
.views-field-field-description{ top: 1.5em; }

图像悬停效果与文本

2 个答案: