0

这是我所在的位置： http ://codepen.io/qdarkness/pen/FyIJh

理想情况下，至少我想象的是，当用户将鼠标悬停在<a>“ <div>img-holder”和“tag”都具有颜色过渡时，“img-holder”在中间。

我怀疑我的<img>内部<div>无法正常工作，但我正在使用该 div 来限制img宽度和高度。

我不想添加额外的 div，这是否可以通过像我尝试的那样应用一个类来实现<div>？

HTML：

<li class="b c d">
  <a href="" class="link">
    <div class="img-holder overlay"><img src="img/test.jpg"></div>
    <div class="tag overlay">
      <h3>test</h3>
      <h4>test</h4>
    </div>
  </a>
</li>

CSS：

.img-holder {
  width: 235px;
  height: 195px;
  overflow: hidden;
}

.tag {
  clear:both;
  position:relative;
  float:left;
  width: 100%;
  overflow:hidden;
  background-color: #FFF;
  text-align: center;
  -webkit-transition: 1s;
  -moz-transition: 1s;
  -ms-transition: 1s;
  -o-transition: 1s;
  transition: 1s;
}

a:hover .overlay {
  background: #909090;
  z-index: 301;
}
4

2 回答 2

0

好的，我想我知道你想做什么......

我已经分叉了你的 Codepen 草图：http ://cdpn.io/uzfrk

要点是将叠加层absolute放置在您的图像上（相对于 .link），然后过渡opacity以使其出现。

<old example removed>

更新：带有清理标记和样式的新草图。为您的目的的简单示例。Codepen 草图在这里：http ://cdpn.io/zhBcA

要点是指向与容器相关的元素的直接子选择器。

figure:hover > figcaption {
  background: #ccc;
}

figure:hover > .overlay {
  opacity: 0.85;
}

让我知道这是否是您正在寻找的。

于 2013-08-27T18:53:15.017 回答
0

这可能是你想要的吗？这只是一个简单的方法。

更新：

现在覆盖文本区域。

http://codepen.io/anon/pen/tlKCJ

于 2013-08-27T19:09:01.360 回答