スライドして画像が開くアニメーションのギャラリーデザイン「Slider with oblique border」

Slider with oblique border
By Kseso

DEMO 表示

画像と画像の境界線を斜めにしたデザインで
Hoverすると、画像が広がって見えるギャラリーになっています

コンテナをtransform: skewX(-20deg);で傾けています
コンテナを傾けると、中の画像まで傾くので画像の方では、transform: skewX(20deg);とすることで傾きをもとに戻すことで、斜めの境界線だけを残すように表現されています

HTML

<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>

CSS

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;}

HTML、CSSともにコンパクトにまとまっていて、CSS名も区別しやすいようになっているので
すでにあるテンプレートにもコピペで組み込めるかと思います

ちなみに画像は、ダミー画像をランダムに配信するサービス lorempixel を使っています

このコードを一式ダウンロードする

DOWNLOAD