ihover-capture-1

スクリプト不要で、画像ホバー時にCSS3アニメーションで様々なキャプションを表示するスタイルシート。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.jpgalt=”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.jpgalt=”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.cssrel=”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.jpgalt=”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.jpgalt=”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.cssrel=”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.jpgalt=”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.jpgalt=”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.cssrel=”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$range1) ||
 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.cssrel=”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.jpgalt=”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.jpgalt=”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.cssrel=”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.jpgalt=”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.jpgalt=”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.cssrel=”stylesheet“>

PICK UP

注目記事セレクション

dropbox-thumbnail
blog-capture-1


コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です