Flex2

 

 

 

 

 

 

---

<div style="width: 1000px; height: 563px; margin: 5px auto; display: flex;">

<p id="fl1" class="fl">&nbsp;</p>

<p id="fl2" class="fl">&nbsp;</p>

<p id="fl3" class="fl">&nbsp;</p>

<p id="fl4" class="fl">&nbsp;</p>

<p id="fl5" class="fl">&nbsp;</p>

</div>

<style><!--

.fl{height:112.5px; border:4px ridge white; flex:0.5; transition:all 1s linear;}

#fl1{box-sizing:border-box; background:url('http://ekladata.com/2TLG0J5D4G6oopBVw8N7kZw1lPk.jpg'); background-size:cover;}

#fl2{box-sizing:border-box; background:url('http://ekladata.com/C_AmPl6hyUfnpB955YcxHR9gh3U.jpg'); background-size:cover;}

#fl3{box-sizing:border-box; background:url('http://ekladata.com/nf6UzzIsVpc-n71owvWbvgrBtos.jpg'); background-size:cover;}

#fl4{box-sizing:border-box; background:url('http://ekladata.com/NvnflQR22IfjO6WB_QiOxIXZuJk.jpg'); background-size:cover;}

#fl5{box-sizing:border-box; background:url('http://ekladata.com/gK9dRYklJeQZzxqxoV7J5kJF1AA.jpg'); background-size:cover;}

#fl1:hover,#fl2:hover,#fl3:hover,#fl4:hover,#fl5:hover{z-index:1; flex:8; height:450px;}

--></style>