気ままにアクアリウム

*

26.ホバー時にサムネイルをズームアップする。

       0

  • メイン記事のサムネイルにホバーした際、サムネイルをズームアップさせます。

ホバー時にサムネイルをズームアップさせる方法

(1)スタイルシート(style.css)に追記する。

  • ファイルの一番後ろに(特に場所は問いません)、下記のように(zoomクラスを)追記します。
  • 変化の速度(時間)を変更した場合は、durationの値を変えてください。
  • ズームの大きさを変えたい場合は、scaleの値をかえてください。
/* Zoom */
.zoom {
  display: inline-block;
  -webkit-transition-duration: 0.2s;
  transition-duration: 0.2s;
  -webkit-transition-property: transform;
  transition-property: transform;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
.zoom:hover, .zoom:focus, .zoom:active {
  -webkit-transform: scale(1.2);
  transform: scale(1.2);
}

(2)home.phpに追記する。

  • the_post_thumbnailの引数にzoomクラスを追記する。
      <?php if ( has_post_thumbnail() ): // サムネイルを持っているときの処理 ?>
      <?php
$title= get_the_title();
the_post_thumbnail(array( 150,150 ),
array( 'alt' =>$title, 'title' => $title )); ?>

      <?php if ( has_post_thumbnail() ): // サムネイルを持っているときの処理 ?>
      <?php
$title= get_the_title();
the_post_thumbnail(array( 150,150 ),
array( 'alt' =>$title, 'title' => $title, 'class' => "zoom")); ?>

以上です!

 - Stinger3 , , ,

Shares