CSS Diagonal Image Overlap that expands to full width when hovered - html

Question

Hi I'm trying to create a collage of three images, like the concept shown in this site: https://codepen.io/zacharybrady/pen/aGmFp
The 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>
THE 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;
}
}
}
Question: How can I add additional transitions that when a specific image is hovered, it will expand to its full width?
PLEASE DON'T MARK this as duplicate or close this for having ambiguous question, because I know and you know the question there is clear and understandable.

Answer 1

You could change the z-axis on hover, so that the full image comes to the front.