html - Div 内容背后的图像

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/