圖片背後的內容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/

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}