<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.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 ----------> <h2><a href='https://3.bp.blogspot.com/-NfaxRzCwymI/UJ1Dz-_QQSI/AAAAAAAADgQ/73uWKRloGOw/s1600/slider-oblicuo.jpg'>The post</a></h2> <div id="slider-k"> <div class="frame-k"> <img src="http://lorempixel.com/500/300/nature" alt="" /> </div> <div class="frame-k"> <img src="http://lorempixel.com/500/300/animals" alt="" /> </div> <div class="frame-k"> <img src="http://lorempixel.com/500/300/people" alt="" /> </div> <div class="frame-k"> <img src="http://lorempixel.com/500/300/transport" alt="" /> </div> </div>

html {background: #d5d5d5;} #slider-k { background: #fff; width: 600px; height: 300px; margin: 20px auto; overflow: hidden; border-radius: .5rem; box-shadow: 0 0 7px rgba(0, 0, 0, 0.7); } #slider-k .frame-k { -moz-box-sizing: border-box; box-sizing: border-box; width: 30%; height: 100%; float: left; overflow: hidden; border-left: 10px solid #fff; pointer: cursor; box-shadow: 0 0 7px rgba(0, 0, 0, 0.9); transform: skewX(-20deg); transition: width 1.2s ease-in-out; } #slider-k:hover div {width: 108px;cursor: w-resize;} #slider-k:hover div:hover { width: 392px;} .frame-k img { margin-left: -55px; transform: skewX(20deg); } #slider-k > div:first-child {margin-left: -63px;} #slider-k > div:last-child {margin-right: -63px;}