[CSS]半透明のパネルを使って、画像にキャプションをかっこよく表示する12種類のスタイルシート -InContent

Post on:2013年12月11日

スタイルシート初心者でも簡単に実装できる、classを加えるだけで画像にキャプションをさまざまなアニメーションを使って表示するスタイルシート(LESSも有り）を紹介します。

↓この画像をホバーしてみてください。

サイトのキャプチャ

InContent

classを加えるだけでキャプションを表示します！

InContent
InContent -GitHub

InContentのデモ

いつもなら静止画のキャプチャやgifアニメーションで紹介するところですが、デモをそのまま掲載した方が軽いのでデモにしました。

アニメーションのエフェクトは全部で12種類、どれもかっこいいです。

Pic

Bottom to Top

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

Pic

Top to Bottom

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

Pic

Left to Right

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

Pic

Right to Left

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

Pic

Rotate In

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

Pic

Rotate Out

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

Pic

Open Up

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

Pic

Open Down

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

Pic

Open Left

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

Pic

Open Right

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

Pic

Come Left

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

Pic

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

top of page

©2024 coliss