Как создать оба изображения и наложение изображений с помощью CSS?

Question

По сути я пытаюсь воссоздать следующие пункты (при наведении курсора мыши является изображение справа):

Который является снимок экрана со следующего сайта: 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, который я использую в настоящее время.

Answer 1

codepen.io/LordNeo/pen/EyxLXX 

Существует два дивы расположены один поверх другого, на парении, первый (непрозрачности пропадает: 0), раскрывающий нижний.

Answer 2

.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>