Question

我正在尝试创建类似于附加图像的内容，其中图像一直显示，然后悬停内容显示颜色叠加层。

现在我将图像作为div的背景，但我不确定这是否是解决此问题的最佳方法，因为我无法找到使图像在div中正确高度的方法。链接是mtmdevbox.com

提前致谢！

HTML

<div class="homepage-content img-one">
    <div class="hidden-content">
        <h1> For Guests </h1>
        <p> Usdaerum explaudae officto commossum seque delitiae. Rate conempo rectio ius ium- quun tinullaborum dentiunt. Tem in re occatem poreperum aut faciae escia dolute pore pro volo ex etur? Offictet doluptas aruptam eos qui temossimet voloria tes- tiam reium harum sum </p>
    </div>
</div>

CSS

.img-one {
background-image: url(/wp-content/uploads/2015/07/homepage_images-03.jpg); background-repeat: no-repeat; 
width: 65%; 
background-size: 100%; 
float: right; 
clear: both;}

screenshot of design

Answer 1

我认为这就是你所追求的。让我知道它是否有帮助！

<div class="article">
  <div class="content">
    <h1>
     This is your title
    </h1>
    <p>
    This is your content
    </p>
  </div>
</div>

CSS

.article { display: block; min-height: 500px; background: url("http://placehold.it/500x500"); background-size: cover; }
.content { display: none; margin: 0; padding: 15px; background: rgba(0, 0, 0, .5); position: relative; min-height: calc(500px - 30px); width: 30%; }
.content h1 { margin: 0; padding: 0; }
.article:hover .content { display: block; }

https://jsfiddle.net/2rb18h0r/

Answer 2

您可以使用定位而不是浮动元素。类似的东西：

.img-one {
  background-image: url("http://i.imgur.com/5BK0htU.png");
  /*background-repeat: no-repeat;*/

  width: 100%;
  height: 300px;
  position: relative;
  background-size: 100%;
  cursor: pointer;
}
.img-one .hidden-content {
  position: absolute;
  opacity: 0.2;
  transition: all 0.4s;
  left: calc(35% - 10px);
  width: 65%;
  height: 100%;
  background: rgba(200, 200, 200, 0.4);
  border-left: 10px solid white;
}
.img-one:hover .hidden-content {
  opacity: 1;
}
.hidden-content h1 {
  margin-left: 5%;
}
.hidden-content p {
  width: 35%;
  margin-left: 5%;
}

<div class="homepage-content img-one">
  <div class="hidden-content">
    <h1> For Guests </h1>
    <p>Usdaerum explaudae officto commossum seque delitiae. Rate conempo rectio ius ium- quun tinullaborum dentiunt. Tem in re occatem poreperum aut faciae escia dolute pore pro volo ex etur? Offictet doluptas aruptam eos qui temossimet voloria tes- tiam
      reium harum sum</p>
  </div>
</div>

在上面的演示中，我将不透明度设置为0.2，但是将其设置为0将允许完全“隐藏”状态。

^{我决定使用不透明度CSS代替display:hidden|none，因为它将允许过渡/平滑淡入效果。如果你不想这样，你可以设置display:hidden的初始状态，然后在悬停状态下使用display:block|inline-block}

Div中内容背后的图像

2 个答案: