Question

我正在Dreamweaver上基于流体网格布局为响应式网站工作。我想在悬停图像时显示标题。我在这个论坛上尝试了很多教程并尝试了答案，但由于我正在使用Fluid Layout，因此无法像普通HTML一样设置精确的图像大小（在Px中）。这样我就无法在图像层顶部正确覆盖另一个图层。

所以我决定确保图像和文本在同一层和悬停动作中文本颜色将从（透明到白色）改变但我想稍微淡化我的图像所以我试图减少悬停动作的不透明度（1到0.8）。但这使得文本看起来也很褪色，我不希望这种情况发生。

有人可以告诉我如何在流体网格布局中正确悬停图像上的标题吗？谢谢！

P.S我无法在问题中添加我的CSS代码和图片链接，请查看我的评论！

Answer 1

好吧，我做了一些例子，例如示例1 很遗憾，我无法使用您的代码。这是代码：

＆＃13;

.wrapper {
  min-width: 1000px;
  margin: 5% auto;
}
.imgs {
  float: left;
  margin: 5px;
  border:1px solid #cacaca;
  border-radius:5px;
  cursor: pointer;
}
.imgs .caption:hover {
  opacity: 0.7;
  color: #fff;
  height:305px;
  background: #000;
}
.caption {
  opacity: 0;
  color: #fff;
  width: 300px;
  height: 300px;
  font-size: 20px;
  border-radius: 5px;
  position: absolute;
  margin-top: -304px;
  text-align: center;
  font-family: sans-serif;
  -webkit-transition: all 0.50s ease-in-out;
  -moz-transition: all 0.50s ease-in-out;
  -ms-transition: all 0.50s ease-in-out;
  -o-transition: all 0.50s ease-in-out;
  transition: all 0.50s ease-in-out;
}
h1 {
  margin-top: 100px;
}

＆＃13;

<div class="container">
  <div class="wrapper">
    <div class="imgs">
      <img src="http://www.gaykendds.com/site/wp-content/uploads/2015/03/bigstock-Red-apple-isolated-25800164-300x300.jpg">
      <div class="caption">
        <h1> Fruits </h1>
        <p>Some red Apple</p>
      </div>
    </div>
    <div class="imgs">
      <img src="http://www.countryoven.com/ProductImages/big/Mixed-Fruit-Hamper.jpg">
      <div class="caption">
        <h1>  Fruits </h1>
        <p>Mixed Fruit Hamper</p>
      </div>
    </div>
    <div class="imgs">
      <img src="http://disfrutaltd.com/wp-content/uploads/2015/02/Peach-300x300.jpg">
      <div class="caption">
        <h1> Fruits </h1>
        <p>Some Peaches Fruits</p>
      </div>
    </div>
    <div class="imgs">
      <img src="https://mauldinfamily1.files.wordpress.com/2013/03/lemon1.jpg">
      <div class="caption">
        <h1> Fruits </h1>
        <p>Some lemon Fruits</p>
      </div>
    </div>
    <div class="imgs">
      <img src="http://kartdeliver.com/wp-content/uploads/2015/06/green-apple-300x300.jpg">
      <div class="caption">
        <h1> Fruits </h1>
        <p>Some green Apple</p>
      </div>
    </div>
    <div class="imgs">
      <img src="http://www.polyvore.com/cgi/img-thing?.out=jpg&size=l&tid=59589715">
      <div class="caption">
        <h1> Fruits </h1>
        <p>Some Orange Fruits</p>
      </div>
    </div>
    <div class="imgs">
      <img src="http://my.xfinity.com/blogs/lifestyle/files/2012/10/tomato.jpg">
      <div class="caption">
        <h1> Vegetables </h1>
        <p>Some Tomato</p>
      </div>
    </div>
    <div class="imgs">
      <img src="http://2.wlimg.com/product_images/bc-full/dir_67/1994770/almond-kernels-1536174.jpg">
      <div class="caption">
        <h1> Seeds </h1>
        <p>Some Almond</p>
      </div>
    </div>
    <div class="imgs">
      <img src="http://beyouthful.net/wp-content/uploads/2013/04/1152191_avocado_on_white.jpg">
      <div class="caption">
        <h1> Vegetables </h1>
        <p>Some Avocado Fruits</p>
      </div>
    </div>
    <div class="imgs">
      <img src="http://www.polyvore.com/cgi/img-thing?.out=jpg&size=l&tid=45920356">
      <div class="caption">
        <h1> Fruits </h1>
        <p>Some Cherry Fruits</p>
      </div>
    </div>
  </div>
</div>

＆＃13;

按填充页面以全屏查看它与所有浏览器兼容。

如果您有任何疑问，请与我联系。

流体网格布局中悬停图像的标题 - Dreamweaver CC

1 个答案: