Блог

Привет, я пытаюсь создать коллаж из трех изображений, подобный концепции, показанной на этом сайте: 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;

      amp;:hover{
        opacity: .8;
      }
    }

  amp;#d0{
      left: -180px;

    }

    amp;#d1{
      left: 40px;
    } 

     amp;#d2{
      left: 260px;

    } 

     amp;#d3{
      left: 480px;

    } 

    amp;#d4{
      left: 700px;

    } 

}
}
 

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

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

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