My Vector Space

人生は寄り道してなんぼ

【TIPS】画像ホバーの際アニメーション効果をつけるCSS3 - InContent -

 

スクリプト不要で、画像ホバー時にCSS3アニメーションで様々なキャプション表示をするスタイルシート6パターン。

基本的にどのパターンで実装する場合でも、以下のサイトからダウンロードした外部ファイルの中にあるCSSファイルを一つ設置するだけでOK。

https://github.com/brunodsgn/incontent

パターンごとに変える必要のあるコードは、htmlファイルのclass名の部分だけ。
CSSファイルは、SASSバージョンとLESSバージョンの2種類あるけど、とりあえずここではSASSバージョンのCSSファイルを設置。

そのあと、body内に設定したいパターンのコードを記述していく流れ。  

 

 【 html 】 SASSバージョン
 1
  <link rel="stylesheet" href="css/sass-compiled.css" type="text/css" />

 

 【 html 】 LESSバージョン
 1
  <link rel="stylesheet" href="css/less-compiled.css" type="text/css" />

 

 次に6パターンそれぞれの記述をしていく。

 設定したいエフェクト用のクラス名の部分以外は共通のコードでOK。

hover effect【 1 】
「class名"bottom-to-top"」「class名"top-to-bottom"」

上下からスライドしてくるエフェクト

incontent-capture-1

 

 【 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"」

左右からスライドしてくるエフェクト

incontent-capture-3

 

 【 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"」

内側から回転して出てくるエフェクト

incontent-capture-3

 

 【 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"」

真ん中を軸に上下に回転しながら出てくるエフェクト

incontent-capture-4

 

 【 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"」

真ん中を軸に左右に回転しながら出てくるエフェクト

incontent-capture-5

 

 【 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"」

真ん中を軸にひねりを加えたエフェクト

incontent-capture-6

 

 【 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記事

PAGE TOP