さぁ!検索しよう!

ブログのアイキャッチ画像等で使える、CSSのみで複数の写真が無造作に重なっているように見せる方法です。

DEMO

また、今回は画像にカーソルを乗せると、傾いていた後続の画像が整列されるようにしています。

各ソースコードは下記の通りです。

HTML

<div class="post_02-demo">
    <a><img src="http://tsukulog.net/wp-content/uploads/2014/02/second_logo.png" alt="second_logo" width="150" height="150" class="alignnone size-full wp-image-39" /></a>
</div>

CSS

.post_02-demo {
    position: relative;
    z-index: 10;
    width: 150px;
    height: auto;
    margin: 30px auto;
    border-radius: 3px;
}

.post_02-demo img {
    width: 100%;
    height: auto;
    padding: 5px;
    border: 1px solid #C0C0C0;
    background-color: #FFF;
    border-radius: 3px;
}

.post_02-demo:before,
.post_02-demo:after {
    content: "";
    position: absolute;
    left: 0;
    height: 150px;
    width: 100%;
    padding: 3.3333%;
    /*5px*/
    background-color: #FFF;
    border: 1px solid #C0C0C0;
    border-radius: 3px;
    -webkit-transition: 0.5s;
    transition: 0.5s;
}

.post_02-demo:before {
    top: 4px;
    z-index: -10;
    -webkit-transform: rotate(4deg);
    -moz-transform: rotate(4deg);
    -o-transform: rotate(4deg);
    -ms-transform: rotate(4deg);
    transform: rotate(4deg);
}

.post_02-demo:after {
    top: 8px;
    z-index: -20;
    -webkit-transform: rotate(-4deg);
    -moz-transform: rotate(-4deg);
    -o-transform: rotate(-4deg);
    -ms-transform: rotate(-4deg);
    transform: rotate(-4deg);
}

.post_02-demo:hover:before,
.post_02-demo:hover:after {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg);
}

.boxは最前面のボックスとなり、このボックスを基準に後続の画像を絶対配置するために、position:relative;を指定しています。続くz-index:10;は最前面にするために大きめの数値を指定しました。

transition:0.5s;は画像にカーソルを乗せたときに(後に登場するhover時)、後続の画像が整列される時間的変化です。

.box:beforeは重なり順が2番目のボックスで、.box:afterは3番目のボックスとなります。そのため.box:beforeにはz-index:-10;を、.box:afterにはz-index:-20;を指定しています。
※要素に:before:afterを指定すると、HTMLでは指定された要素内の前後に疑似要素が生成されます。以下のようなイメージです。

<div class="box">
<!–- :before –->
<img src="画像" alt=""/>
<!–- :after –->
</div>

.transform:rotate();でボックスの傾きを指定しています。()に正の値を入れると時計回りに、負の値を入れると反時計回りに傾きます。


以上で、CSSのみで複数の写真が無造作に重なっているように見せる方法を終わります。