【TIPS】画像ホバーの際アニメーション効果をつけるCSS3 - InContent -
スクリプト不要で、画像ホバー時にCSS3アニメーションで様々なキャプション表示をするスタイルシート6パターン。
基本的にどのパターンで実装する場合でも、以下のサイトからダウンロードした外部ファイルの中にあるCSSファイルを一つ設置するだけでOK。
https://github.com/brunodsgn/incontent
パターンごとに変える必要のあるコードは、htmlファイルのclass名の部分だけ。
CSSファイルは、SASSバージョンとLESSバージョンの2種類あるけど、とりあえずここではSASSバージョンのCSSファイルを設置。
そのあと、body内に設定したいパターンのコードを記述していく流れ。
次に6パターンそれぞれの記述をしていく。
設定したいエフェクト用のクラス名の部分以外は共通のコードでOK。
hover effect【 1 】
「class名"bottom-to-top"」「class名"top-to-bottom"」
「class名"bottom-to-top"」「class名"top-to-bottom"」
上下からスライドしてくるエフェクト
【 html 】
1
<div class="pic">
2
<img src="img/01.jpg" class="pic-image" alt="pic"/>
3
<span class="pic-caption bottom-to-top">
4
<h1 class="pic-title">bottom-to-top</h1>
5
<p>Some description or text.</p>
6
</span>
7
</div>
hover effect【 2 】
「class名"left-to-right"」「class名"right-to-left"」
「class名"left-to-right"」「class名"right-to-left"」
左右からスライドしてくるエフェクト
【 html 】
1
<div class="pic">
2
<img src="img/03.jpg" class="pic-image" alt="pic"/>
3
<span class="pic-caption left-to-right">
4
<h1 class="pic-title">left-to-right</h1>
5
<p>Some description or text.</p>
6
</span>
7
</div>
hover effect【 3 】
「class名"rotate-in"」「class名"rotate-out"」
「class名"rotate-in"」「class名"rotate-out"」
内側から回転して出てくるエフェクト
【 html 】
1
<div class="pic">
2
<img src="img/05.jpg" class="pic-image" alt="pic"/>
3
<span class="pic-caption rotate-in">
4
<h1 class="pic-title">Rotate-In</h1>
5
<p>Some description or text.</p>
6
</span>
7
</div>
hover effect【 4 】
「class名"open-up"」「class名"open-down"」
「class名"open-up"」「class名"open-down"」
真ん中を軸に上下に回転しながら出てくるエフェクト
【 html 】
1
<div class="pic">
2
<img src="img/07.jpg" class="pic-image" alt="pic"/>
3
<span class="pic-caption open-up">
4
<h1 class="pic-title">Open-Up</h1>
5
<p>Some description or text.</p>
6
</span>
7
</div>
hover effect【 5 】
「class名"open-left"」「class名"open-right"」
「class名"open-left"」「class名"open-right"」
真ん中を軸に左右に回転しながら出てくるエフェクト
【 html 】
1
<div class="pic">
2
<img src="img/09.jpg" class="pic-image" alt="pic"/>
3
<span class="pic-caption open-left">
4
<h1 class="pic-title">Open-Left</h1>
5
<p>Some description or text.</p>
6
</span>
7
</div>
hover effect【 6 】
「class名"come-left"」「class名"come-right"」
「class名"come-left"」「class名"come-right"」
真ん中を軸にひねりを加えたエフェクト
【 html 】
1
<div class="pic">
2
<img src="img/11.jpg" class="pic-image" alt="pic"/>
3
<span class="pic-caption come-left">
4
<h1 class="pic-title">Come-Left</h1>
5
<p>Some description or text.</p>
6
</span>
7
</div>
関連記事画像ホバー時に効果をつけるtips記事