如何創建圖像標題和圖像疊加與CSS？

從本質上講，我試圖重新以下項目（懸停是右圖）：如何創建圖像標題和圖像疊加與CSS？

這是從以下網站的屏幕截圖：https://www.loungelizard.com/ 有很多問題，只是處理只是其中創建一個圖像覆蓋或只是一個圖像標題，所以我想我會是他們兩個的混合版本。

這裏是我到目前爲止的代碼：

HTML：

<a href="#" class="desc_ImageOverlay"> 
    <img src="http://www.imagesource.com/Doc/IS0/Media/Home2/5/8/7/8/IS09AR776.jpg" class="img-responsive" alt="" /> 
    <div class="desc"> 
     <p class="desc_content">Test</p> 
    </div> 
    <span class="OverlayText"> 
     <p> 
     This is some new test text. 
     </p> 
    </span> 
</a>

CSS：

div.desc{ 
    bottom: 50%; 
    color: #fff; 
    left: 50%; 
    position: absolute; 
    width: 100%; 
} 

.desc_content{ 
    color: orange; 
    shadow: text-shadow: 2px 2px 5px black; 
    font-size: 20px; 
} 

.desc_ImageOverlay { 
     width:140px; 
     text-decoration:none; 
     position:relative; 
     display:block; 
     border:1px solid #666; 
     padding:3px; 
     margin-right:5px; 
     float:left; 
} 

.desc_ImageOverlay span.OverlayText { 
     visibility:hidden; 
     position:absolute; 
     filter:alpha(opacity=50); 
     -moz-opacity:0.5; 
     -khtml-opacity: 0.5; 
     opacity: 0.5; 
} 

desc_ImageOverlay:hover span.OverlayText{ 
     visibility:visible; 
}

任何試圖達到相同的結果，本網站將不勝感激幫助。這是我目前使用的codepen。

來源

2016-05-29 jimmyjacks

兩個div，一個在另一個的頂部，過濾器：不透明度第一上懸停。我會做一個小提琴併發布並回答 – LordNeo

codepen.io/LordNeo/pen/EyxLXX

有兩個div定位爲一個在另一個的頂部上，懸停，第一個自敗（不透明度：0）揭示底部之一。

來源

2016-05-29 22:53:01 LordNeo

.desc_ImageOverlay{ 
 
    text-decoration: none; 
 
    position:relative; 
 
    display: block; 
 
    float: left; 
 
    overflow: hidden; 
 
    width:240px; 
 
    background: none 50%; 
 
    background-size: cover; 
 
} 
 
.desc_ImageOverlay .desc{ 
 
    font: 16px/20px sans-serif; 
 
    color:#fff; 
 
    text-align:center; 
 
    padding:24px 16px; 
 
    transform: translateY(30%); -webkit-transform: translateY(30%); 
 
    transition: 0.5s;   -webkit-transition: 0.5s; 
 
} 
 
.desc_ImageOverlay .desc p{ 
 
    transition: 0.5s; -webkit-transition: 0.5s; 
 
    opacity:0; 
 
} 
 
/*hover*/ 
 
.desc_ImageOverlay:hover .desc{ 
 
    transform: translateY(0%); -webkit-transform: translateY(0%); 
 
    background: rgba(255,255,255, 0.5); 
 
    color: #000; 
 
} 
 
.desc_ImageOverlay:hover .desc p{ 
 
    opacity:1; 
 
    color: #000; 
 
}

<a href="#" class="desc_ImageOverlay" style="background-image: url(http://www.imagesource.com/Doc/IS0/Media/Home2/5/8/7/8/IS09AR776.jpg);"> 
 
    <div class="desc"> 
 
    <h2>STRATEGY</h2> 
 
    <p> 
 
     Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum aliquid illo, repellat magnam veritatis mollitia eum itaque reiciendis esse 
 
    </p> 
 
    </div> 
 
</a> 
 

 
<a href="#" class="desc_ImageOverlay" style="background-image: url(http://www.imagesource.com/Doc/IS0/Media/TR5/9/c/c/6/IS09AF3QC.jpg 
 
);"> 
 
    <div class="desc"> 
 
    <h2>SAILING</h2> 
 
    <p> 
 
     Consectetur adipisicing elit. Dolorum aliquid illo, repellat magnam veritatis mollitia eum itaque reiciendis esse lorem ipsum dolor sit amet. 
 
    </p> 
 
    </div> 
 
</a>

來源

2016-05-29 22:55:17

如何創建圖像標題和圖像疊加與CSS？

回答

相關問題