Code modified from http://jsfiddle.net/4E2bV/1/
A Pen by InSuperposition on CodePen.
<div class="resp-rect__boundry"> | |
<div class="resp-rect fontawesome-play-circle"> | |
<img class="resp-rect__streched-element" src="http://placekitten.com/203/203" /> | |
</div> | |
<div class="resp-rect fontawesome-play-circle"> | |
<img class="resp-rect__streched-element" src="http://placekitten.com/204/204" /> | |
</div> | |
<div class="resp-rect fontawesome-play-circle"> | |
<img class="resp-rect__streched-element" src="http://placekitten.com/201/201" /> | |
</div> | |
<div class="resp-rect fontawesome-play-circle"> | |
<img class="resp-rect__streched-element" src="http://placekitten.com/200/200" /> | |
</div> | |
<div class="resp-rect fontawesome-play-circle"> | |
<img class="resp-rect__streched-element" src="http://placekitten.com/300/300" /> | |
</div> | |
<span class="resp-rect fontawesome-play-circle"> | |
<img class="resp-rect__streched-element" src="http://placekitten.com/299/299" /> | |
</span> | |
<div class="resp-rect "> | |
<a class="resp-rect__streched-element fontawesome-play-circle" href="http://www.facbook.com"> | |
<img class="resp-rect__streched-element fontawesome-play-circle" src="http://placekitten.com/302/302" /> | |
</a> | |
</div> | |
<div class="resp-rect"> | |
<img class="resp-rect__streched-element" src="http://placekitten.com/303/303" /> | |
</div> | |
<div class="resp-rect"> | |
<img class="resp-rect__streched-element" src="http://placekitten.com/304/304" /> | |
</div> | |
<div class="resp-rect"> | |
<img class="resp-rect__streched-element" src="http://placekitten.com/305/305" /> | |
</div> | |
<div class="resp-rect"> | |
<img class="resp-rect__streched-element" class="fontawesome-play-circle" src="http://placekitten.com/306/306" /> | |
</div> | |
<div class="resp-rect"> | |
<iframe class="resp-rect__streched-element fontawesome-play-circle" src="//player.vimeo.com/video/55463180" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe> | |
</div> | |
</div> |
Code modified from http://jsfiddle.net/4E2bV/1/
A Pen by InSuperposition on CodePen.
@import url(http://weloveiconfonts.com/api/?family=fontawesome); | |
/* fontawesome */ | |
[class*="fontawesome-"]:before { | |
font-family: 'FontAwesome', sans-serif; | |
display:inline-block; | |
color:white; | |
/* relative to */ | |
position: relative; | |
z-index:1; | |
/*Tweak font */ | |
font-size: 4em; | |
top: 35%; | |
left: 2.5%; | |
} | |
body{ | |
margin: 10% auto; | |
text-align: center; | |
} | |
.resp-rect__boundry{ | |
display: inline-block; | |
width: 80%; | |
} | |
.resp-rect { | |
display: inline-block; | |
position: relative; | |
float: left; | |
height: 0; | |
/* These values determine rect's ratio*/ | |
width: 33.33333%; | |
padding-bottom: 33.33333%; | |
/* Use margin to create*/ | |
margin: 0; | |
background-color:lightblue; | |
} | |
.resp-rect:nth-child(6n + 1), | |
.resp-rect:nth-child(6n + 2), | |
.resp-rect:nth-child(6n + 3){ | |
float:left; | |
} | |
.resp-rect:nth-child(6n + 5), | |
.resp-rect:nth-child(6n + 2), | |
.resp-rect:nth-child(6n + 3){ | |
float:right; | |
} | |
.resp-rect__streched-element{ | |
width: 100%; | |
height: 100%; | |
position: absolute; | |
top: bottom; | |
right:0; | |
left:0; | |
} | |