My Vector Space

  人生は寄り道してなんぼ

画像ホバーの際アニメーション効果をつけるCSS3 (6パターン・スクリプト不要) - InContent -

 

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

基本的にどのパターンで実装する場合でも、ダウンロードした外部ファイル(https://github.com/brunodsgn/incontent)の中にあるCSSファイルを一つ設置するだけでOK。パターンごとに変える必要のあるコードは、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