CSSだけで画像キャプチャにエフェクトをつけて魅せる「InContent」

class指定をするだけで、キャプチャ画像にアニメーションをかけてカッコよく魅せてくれるスタイルシートの「InContent」のご紹介。

1.InContentから「incontent.css」をダウンロード

2.CSSを読み込む

<link rel="stylesheet" href="css/incontent.css" type="text/css" />

1	<link rel="stylesheet" href="css/incontent.css" type="text/css" />

3.HTMLを記述

<div id="pic">
	<img src="img/01.jpg" class="pic-image" alt="Pic" />
	<span class="pic-caption bottom-to-top">
		<h1 class="pic-title">Pic-Title</h1>
		<p>Some description or text</p>
	</span>
</div>

<h1 class="pic-title">Pic-Title</h1>

<p>Some description or text</p>

</span>

</div>

これだけで、完了です。

エフェクトの種類は12種類用意されています。
違うエフェクトに変更したい場合は、<span>のクラス指定「bottom-to-top」を書き換えてください。

▼エフェクトサンプル
Class	Description
.bottom-to-top	bottom to top
.top-to-bottom	top to bottom
.left-to-right	left to right
.right-to-left	right to left
.rotate-in	rotate in
.rotate-out	rotate out
.open-up	open up
.open-down	open down
.open-left	open left
.open-right	open right
.come-left	come to left
.come-right	come to right