<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="kwadrat"> <div class="trojkat"> <div class="trojkat_bg"></div> </div> </div> <div class="kwadrat2"> <div class="trojkat2"> <div class="trojkat_bg2"></div> </div> </div>

.kwadrat { width: 232px; height: 180px; border-bottom: 1px solid #000; overflow: hidden; } .trojkat { position: relative; overflow: hidden; transform: rotate(45deg) skew(10deg,10deg); border-left: 1px solid #000; border-top: 1px solid #000; width: 200px; height: 200px; margin:81px 0 0 16px; } .trojkat_bg { position: absolute; width: 200%; height: 200%; top: -50%; left: -50%; z-index: -1; background: url(http://jakub-zajac.pl/wp-content/uploads/2014/03/infe.jpg); background-size: 100%; background-position: center top; transform: skew(-10deg,-10deg) rotate(-45deg) ; transition: .3s; } .trojkat_bg:hover{ background-size: 90%; } .kwadrat2 { width: 232px; height: 170px; border-top: 1px solid #000; overflow: hidden; margin-top: 5px; } .trojkat2 { position: relative; overflow: hidden; transform: rotate(45deg) skew(10deg,10deg); border-bottom: 1px solid #000; border-right: 1px solid #000; width: 200px; height: 200px; margin:-100px 0 0 16px; } .trojkat_bg2 { position: absolute; width: 200%; height: 200%; top: -50%; left: -50%; z-index: -1; background: url(http://jakub-zajac.pl/wp-content/uploads/2014/03/last.jpg); background-size: 100%; background-position: center top; transform: skew(-10deg,-10deg) rotate(-45deg) ; transition: .3s; } .trojkat_bg2:hover{ background-size: 90%; }