CSS Диагональ Перекрытия изображения, которая расширяется до полной ширины при наведении

Question

Привета Я пытаюсь создать коллаж из трех изображений, как концепции, показанные на этом сайте: https://codepen.io/zacharybrady/pen/aGmFp

HTML-:

<div class="container"> 

<div class="diagonal" id="d0"> 

    <img src="http://www.shortpacked.com/comics/2013-02-08-prologue.png" /> 
    <p class="overlay"> 
    TEST 
    </p> 

    </div> 

    <div class="diagonal" id="d1"> 

    <img src="http://www.questionablecontent.net/comics/2381.png" /> 
    <p class="overlay"> 
    TEST 
    </p> 
    </div> 

    <div class="diagonal" id="d2"> 

    <img src="http://www.shortpacked.com/comics/2005-01-17-bow-before-your-master.gif" /> 
    <p class="overlay"> 
    TEST 
    </p> 
    </div> 

    <div class="diagonal" id="d3"> 

    <img src="http://www.questionablecontent.net/comics/2021.png" /> 
    <p class="overlay"> 
    TEST 
    </p> 
    </div> 

    <div class="diagonal" id="d4"> 

    <img src="http://www.shortpacked.com/comics/2009-03-27-fourohfour.png" /> 
    <p class="overlay"> 
    TEST 
    </p> 
    </div> 



</div> 

CSS-код:

@import "compass/css3"; 

@import "compass/css3"; 

body{ 
    background: blue; 
} 

.container{ 
    width: 800px; 
    height: 400px; 
    background: white; 
    overflow: hidden; 
    position: relative; 
    margin-left: 100px; 

.diagonal{ 
    height: 1200px; 
    width: 200px; 
    overflow: hidden; 
    @include rotate(25deg); 
    position: absolute; 
    top: -200px; 

    img{ 
    @include rotate(-25deg); 
    margin-top: -100px; 
     margin-left: -200px; 
    } 

    .overlay{ 
     @include rotate(-25deg); 
     height: 1200px; 
     width: 800px; 
     position: absolute; 
     top: -50px; 
     left: 0; 
     background: black; 
     opacity: 0; 
     color: white; 
     -webkit-transition: opacity .5s; 
     vertical-align: middle; 
     text-align: center; 

     &:hover{ 
     opacity: .8; 
     } 
    } 

    &#d0{ 
     left: -180px; 

    } 

    &#d1{ 
     left: 40px; 
    } 

    &#d2{ 
     left: 260px; 

    } 

    &#d3{ 
     left: 480px; 

    } 

    &#d4{ 
     left: 700px; 

    } 

} 
} 

Вопрос: Как я могу добавить дополнительные переходы, когда конкретный образ парил, она будет расширяться на полную ширину?

ПОЖАЛУЙСТА НЕ ЗНАЙТЕ это как дубликат или закройте это для того, чтобы задать двусмысленный вопрос, потому что я знаю, и вы знаете, что вопрос ясен и понятен.

Answer 1

Вы можете изменить ось z на hover, чтобы изображение полностью отображалось спереди.