My Vector Space

  人生は寄り道してなんぼ

画像ホバーの際アニメーション効果をつけるCSS3 (6パターン) - ihover -

 

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

hover effect【1】

 

 左側と右側からテキストがスライドしてくるエフェクト

  ihover-capture-1

 コーディングは、まずhtmlファイルに以下を記述

 【 html 】
 1
  <!-- From left and right -->
 2
  <div class="row">
 3
      <div class="col-sm-6">
 4
 
 5
          <!-- normal -->
 6
          <div class="ih-item circle effect13 from_left_and_right"><a href="#">
 7
              <div class="img"><img src="client/images/assets/7.jpg" alt="img"></div>
 8
              <div class="info">
 9
                  <div class="info-back">
 10
                      <h3>Heading here</h3>
 11
                      <p>Description goes here</p>
 12
                  </div>
 13
              </div></a></div>
 14
          <!-- end normal -->
 15
 
 16
      </div>
 17
      <br>
 18
      <div class="col-sm-6">
 19
 
 20
          <!-- colored -->
 21
          <div class="ih-item circle colored effect13 from_left_and_right"><a href="#">
 22
              <div class="img"><img src="client/images/assets/1.jpg" alt="img"></div>
 23
                  <div class="info">
 24
                      <div class="info-back">
 25
                          <h3>Heading here</h3>
 26
                          <p>Description goes here</p>
 27
                      </div>
 28
                  </div></a></div>
 29
          <!-- end colored -->
 30
 
 31
      </div>
 32
  </div>
 33
  <!-- end From left and right -->

 CSSはダウンロードした外部ファイル( https://github.com/gudh/ihover )の中にある  「ihover.css」を読み込む

 【 CSS 】
 1
  <link href="styles/ihover.css" rel="stylesheet">
hover effect【2】

 

 画像を画面上側に、テキストを下側にエフェクトをかけて配置

   ihover-capture-2

 コーディングは、まずhtmlファイルに以下を記述

 【 html 】
 1
  <!-- From left and right -->
 2
  <div class="row">
 3
      <div class="col-sm-6">
 4
 
 5
          <!-- normal -->
 6
          <div class="ih-item circle effect13 from_left_and_right"><a href="#">
 7
              <div class="img"><img src="client/images/assets/7.jpg" alt="img"></div>
 8
              <div class="info">
 9
                  <div class="info-back">
 10
                      <h3>Heading here</h3>
 11
                      <p>Description goes here</p>
 12
                  </div>
 13
              </div></a></div>
 14
          <!-- end normal -->
 15
 
 16
      </div>
 17
      <br>
 18
      <div class="col-sm-6">
 19
 
 20
          <!-- colored -->
 21
          <div class="ih-item circle colored effect13 from_left_and_right"><a href="#">
 22
              <div class="img"><img src="client/images/assets/1.jpg" alt="img"></div>
 23
                  <div class="info">
 24
                      <div class="info-back">
 25
                          <h3>Heading here</h3>
 26
                          <p>Description goes here</p>
 27
                      </div>
 28
                  </div></a></div>
 29
          <!-- end colored -->

 CSSはダウンロードした外部ファイル( https://github.com/gudh/ihover )の中にある   「ihover.css」を読み込む

 【 CSS 】
 1
  <link href="styles/ihover.css" rel="stylesheet">
hover effect【3】

 

 画像を回転させながら消して、テキスト表示に切り替える

    ihover-capture-3

 コーディングは、まずhtmlファイルに以下を記述

 【 html 】
 1
  <div class="row">
 2
      <div class="col-sm-6">
 3
 
 4
           <!-- normal -->
 5
           <div class="ih-item square effect2"><a href="#">
 6
               <div class="img"><img src="client/images/assets/rect/10.jpg" alt="img"></div>
 7
               <div class="info">
 8
                   <h3>Heading here</h3>
 9
                   <p>Description goes here</p>
 10
               </div></a></div>
 11
          <!-- end normal -->
 12
 
 13
      </div>
 14
      <br>
 15
      <div class="col-sm-6">
 16
 
 17
          <!-- colored -->
 18
          <div class="ih-item square colored effect2"><a href="#">
 19
              <div class="img"><img src="client/images/assets/rect/1.jpg" alt="img"></div>
 20
              <div class="info">
 21
                  <h3>Heading here</h3>
 22
                  <p>Description goes here</p>
 23
              </div></a></div>
 24
          <!-- end colored -->
 25
 
 26
      </div>
 27
    </div>

 CSSはダウンロードした外部ファイル( https://github.com/gudh/ihover )の中にある  「ihover.css」を読み込む

 【 CSS 】
 1
  <link href="styles/ihover.css" rel="stylesheet">
hover effect【4】

 

 回転にひねりを加えてテキストを表示

   ihover-capture-4

 コーディングは、まずhtmlファイルに以下を記述

 【 html 】
 1
  function pagination($pages = '', $range = 4)
 2
  {
 3
      $showitems = ($range * 2)+1;
 4
 
 5
      global $paged;
 6
      if(empty($paged)) $paged = 1;
 7
 
 8
      if($pages == '')
 9
      {
 10
          global $wp_query;
 11
          $pages = $wp_query->max_num_pages;
 12
          if(!$pages)
 13
          {
 14
              $pages = 1;
 15
          }
 16
       }
 17
 
 18
       if(1 != $pages)
 19
      {
 20
          echo "<div class=\"pagination clearfix\"><span>Page ".$paged." of ".$pages."</span>";
 21
        if($paged > 2 && $paged > $range+1 && $showitems < $pages) echo "<a href='"
 22
        .get_pagenum_link(1)."'>&laquo; First</a>";
 23
        if($paged > 1 && $showitems < $pages) echo "<a href='".get_pagenum_link($paged - 1)
 24
        ."'>&lsaquo; Previous</a>";
 25
 
 26
        for ($i=1; $i <= $pages; $i++)
 27
        {
 28
        if (1 != $pages &&( !($i >= $paged+$range+1 || $i <= $paged-$range-1) ||
 29
        $pages <= $showitems ))
 30
        {
 31
             echo ($paged == $i)? "<span class=\"current\">".$i."</span>":"<a href='"

 CSSはダウンロードした外部ファイル( https://github.com/gudh/ihover )の中にある  「ihover.css」を読み込む

 【 CSS 】
 1
  <link href="styles/ihover.css" rel="stylesheet">
hover effect【5】

 

 画像拡大+テキストスライド表示

  ihover-capture-5

 コーディングは、まずhtmlファイルに以下を記述

 【 html 】
 1
  <!-- From left and right-->
 2
  <div class="row">
 3
      <div class="col-sm-6">
 4
 
 5
          <!-- normal -->
 6
          <div class="ih-item square effect6 from_left_and_right"><a href="#">
 7
              <div class="img"><img src="client/images/assets/rect/2.jpg" alt="img"></div>
 8
              <div class="info">
 9
                  <h3>Heading here</h3>
 10
                  <p>Description goes here</p>
 11
              </div></a></div>
 12
          <!-- end normal -->
 13
 
 14
      </div>
 15
      <br>
 16
      <div class="col-sm-6">
 17
 
 18
          <!-- colored -->
 19
          <div class="ih-item square colored effect6 from_left_and_right"><a href="#">
 20
              <div class="img"><img src="client/images/assets/rect/4.jpg" alt="img"></div>
 21
              <div class="info">
 22
                  <h3>Heading here</h3>
 23
                  <p>Description goes here</p>
 24
              </div></a></div>
 25
          <!-- end colored -->
 26
 
 27
      </div>
 28
    </div>
 29
  <!-- end From left and right-->

 CSSはダウンロードした外部ファイル( https://github.com/gudh/ihover )の中にある  「ihover.css」を読み込む

 【 CSS 】
 1
  <link href="styles/ihover.css" rel="stylesheet">
hover effect【6】

 

 画像拡大+テキストをズームアップ表示からの配置

  ihover-capture-6

 コーディングは、まずhtmlファイルに以下を記述

 【 html 】
 1
  <div class="row">
 2
      <div class="col-sm-6">
 3
 
 4
          <!-- normal -->
 5
          <div class="ih-item square effect7"><a href="#">
 6
              <div class="img"><img src="client/images/assets/rect/2.jpg" alt="img"></div>
 7
              <div class="info">
 8
                  <h3>Heading here</h3>
 9
                  <p>Description goes here</p>
 10
              </div></a></div>
 11
          <!-- end normal -->
 12
 
 13
      </div>
 14
      <br>
 15
      <div class="col-sm-6">
 16
 
 17
          <!-- colored -->
 18
          <div class="ih-item square colored effect7"><a href="#">
 19
              <div class="img"><img src="client/images/assets/rect/4.jpg" alt="img"></div>
 20
              <div class="info">
 21
                  <h3>Heading here</h3>
 22
                  <p>Description goes here</p>
 23
              </div></a></div>
 24
          <!-- end colored -->
 25
 
 26
     </div>
 27
  </div>

 CSSはダウンロードした外部ファイル( https://github.com/gudh/ihover )の中にある  「ihover.css」を読み込む

 【 CSS 】
 1
  <link href="styles/ihover.css" rel="stylesheet">

 

 

 

関連記事画像ホバー時に効果をつけるtips記事

PAGE TOP