[CSS]半透明のパネルを使って、画像にキャプションをかっこよく表示する12種類のスタイルシート -InContent
Post on:2013年12月11日
スタイルシート初心者でも簡単に実装できる、classを加えるだけで画像にキャプションをさまざまなアニメーションを使って表示するスタイルシート(LESSも有り)を紹介します。
↓この画像をホバーしてみてください。

InContent
classを加えるだけでキャプションを表示します!
InContentのデモ
いつもなら静止画のキャプチャやgifアニメーションで紹介するところですが、デモをそのまま掲載した方が軽いのでデモにしました。
アニメーションのエフェクトは全部で12種類、どれもかっこいいです。

Bottom to Top
画像のキャプションのテキスト

Top to Bottom
画像のキャプションのテキスト

Left to Right
画像のキャプションのテキスト

Right to Left
画像のキャプションのテキスト

Rotate In
画像のキャプションのテキスト

Rotate Out
画像のキャプションのテキスト

Open Up
画像のキャプションのテキスト

Open Down
画像のキャプションのテキスト

Open Left
画像のキャプションのテキスト

Open Right
画像のキャプションのテキスト

Come Left
画像のキャプションのテキスト

Come Right
画像のキャプションのテキスト
InContentの使い方
実装はとても簡単です。
Step 1: 外部ファイル
当スタイルシートをhead内に配置します。
<head> ... <link rel="stylesheet" href="css/incontent.css" type="text/css" /> </head>
Step 2: HTML
画像のimg要素とキャプションのspan要素をdivで包みます。
<div class="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>
用意されているclassは12種類。spanの「bottom-to-top」を変更して利用してください。
- .bottom-to-top
- .top-to-bottom
- .left-to-right
- .right-to-left
- .rotate-in
- .rotate-out
- .open-up
- .open-down
- .open-left
- .open-right
- .come-left
- .come-right
sponsors