マウスオーバーで画像アニメーション表示する44種類のCSS【Imagehover.css】

imagehover.css-master

コピペで簡単に実装可能!19KBの縮小サイズ「Imagehover.css」は、CSSのみで44種類の画像ホバー効果が選択できます!

マウスオーバーで画像アニメーション表示する【imagehover.css】

imagehover.cssは、ホバー時(マウスオーバー)に画像に44種類のアニメーション効果を提供するCSSライブラリです。。

プレビュー

imagehover_cssプレビュー

Imagehover.css デモ

著者ciar4n
公式ページwebsite
デモページimagehover.css
最後の更新2019年7月4日
ライセンスMIT

LICENSE:MIT
MITライセンスでは、商用利用だけでなく、コピーの使用、複製、変更、統合、公開、配布、サブライセンス、複製物を販売することが認められています。ただし、使用時には著作権表示とライセンス表示をする必要があります。ソースコード上(css、html)内に、著作権およびライセンス表示をすれば、サイト上で公開し表示する義務はありません。参照:MITライセンス

imagehover.css ダウンロード

download

imagehover.css Download

【imagehover.css】 設置方法

スタイルシート(css)『imagehover.min.css』は<head”></head”>内に記述して読み込ませればok!


<link rel="stylesheet" href="css/imagehover.min.css">

【imagehover.css】のHTML


<figure class="imghvr-fade">
<img src="example-image.jpg" alt="代替テキスト">
  <figcaption>
    <h3>タイトル</h3>
    <p>説明文</p>
  </figcaption>
</figure>

画像からリンクするHTML

画像からリンクするには、figcaption要素の直後に空の<a href="リンク先URL"></a>タグを追加します。


<figure class="imghvr-fade">
<img src="example-image.jpg" alt="代替テキスト">
  <figcaption>
    <h3>タイトル</h3>
    <p>説明文</p>
  </figcaption>
<a href="リンク先URL"></a>
</figure>

利用可能なホバー効果

figcaption要素に1~44のコードを選択しclass指定すればok!


<figure class="下記44種類の中から選択">
<img src="example-image.jpg" alt="代替テキスト">
  <figcaption>
    <h3>タイトル</h3>
    <p>説明文</p>
  </figcaption>
<a href="リンク先URL"></a>
</figure>

  1. imghvr-fade
  2. imghvr-push-up
  3. imghvr-push-down
  4. imghvr-push-left
  5. imghvr-push-right
  6. imghvr-slide-up
  7. imghvr-slide-down
  8. imghvr-slide-left
  9. imghvr-slide-right
  10. imghvr-reveal-up
  11. imghvr-reveal-down
  12. imghvr-reveal-left
  13. imghvr-reveal-right
  14. imghvr-hinge-up
  15. imghvr-hinge-down
  16. imghvr-hinge-left
  17. imghvr-hinge-right
  18. imghvr-flip-horiz
  19. imghvr-flip-vert
  20. imghvr-flip-diag-1
  21. imghvr-flip-diag-2
  22. imghvr-shutter-out-horiz
  23. imghvr-shutter-out-vert
  24. imghvr-shutter-out-diag-1
  25. imghvr-shutter-out-diag-2
  26. imghvr-shutter-in-horiz
  27. imghvr-shutter-in-vert
  28. imghvr-shutter-in-out-horiz
  29. imghvr-shutter-in-out-vert
  30. imghvr-shutter-in-out-diag-1
  31. imghvr-shutter-in-out-diag-2
  32. imghvr-fold-up
  33. imghvr-fold-down
  34. imghvr-fold-left
  35. imghvr-fold-right
  36. imghvr-zoom-in
  37. imghvr-zoom-out
  38. imghvr-zoom-out-up
  39. imghvr-zoom-out-down
  40. imghvr-zoom-out-left
  41. imghvr-zoom-out-right
  42. imghvr-zoom-out-flip-horiz
  43. imghvr-zoom-out-flip-vert
  44. imghvr-blur

背景色・文字色の変更

個別に変更する場合

<figure class="imghvr-fade">
<img src="example-image.jpg" alt="代替テキスト">
  <figcaption style="background-color:#333; color:#fff;">
    <h3>タイトル</h3>
    <p>説明文</p>
  </figcaption>
<a href="リンク先URL"></a>
</figure>

任意のカラーコードに変更すればOK!


background-color:#333;
color:#fff;

一括で変更するには?

『imagehover.min.css』内の『background-color』『color』下記の個所のカラーコードを変更。


[class*=" imghvr-"], [class^=imghvr-] {
  background-color: #2266a5;
  color: #fff;
}
 
[class*=" imghvr-"] figcaption, [class^=imghvr-] figcaption {
  background-color: #135796;
  color: #fff
}
 
[class*=" imghvr-reveal-"]:before, [class^=imghvr-reveal-]:before {
  background-color: #135796
}

【Imagehover.css】のソースコード設置例


<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0">
    <title>【Imagehover.css】</title>
 
    <link rel="stylesheet" href="css/imagehover.min.css">
 
</head>
<body>
<div class="container">
<h1>【Imagehover.css】</h1>
  <h2>【Imagehover.css】設置方法</h2>
 
<figure class="imghvr-fade">
<img src="example-image.jpg" alt="代替テキスト">
  <figcaption>
    <h3>タイトル</h3>
    <p>説明文</p>
  </figcaption>
<a href="リンク先URL"></a>
</figure>
 
<figure class="imghvr-fade">
<img src="example-image.jpg" alt="代替テキスト">
  <figcaption>
    <h3>タイトル</h3>
    <p>説明文</p>
  </figcaption>
<a href="リンク先URL"></a>
</figure>
 
<figure class="imghvr-fade">
<img src="example-image.jpg" alt="代替テキスト">
  <figcaption>
    <h3>タイトル</h3>
    <p>説明文</p>
  </figcaption>
<a href="リンク先URL"></a>
</figure>
 
</div>
</body>
</html>

Imagehover.css Download

「集客」無料相談承ります!

お問い合わせはこちら

関連記事

  1. tiles_grid_video

    YouTube 動画のスライドショー📽をホームページへ…

  2. collapsible

    JavaScriptでスムーズなコンテンツ切り替えプラグイン デモ【c…

  3. accordion-init

    JavaScriptのモダンで滑らかな展開型アコーディオン【accor…

  4. CSS + HTML だけのアコーディオン

    CSS + HTML だけのアコーディオン(Accordion)メニュ…

  5. easy-responsive-tabs-to-accordion

    水平または垂直タブをアコーディオンに最適化する軽量のjQueryプラグ…

  6. レスポンシブ ポラロイドギャラリー【Vintalight】

    レスポンシブ ポラロイドギャラリー【Vintalight】

制作実績一覧

  1. 行田市 三島造園有限会社
  2. 行田市リサイクルイズミ
  3. スパイシーベジーカレー
  4. bacchus
  5. ふじぜんリニューアル後
  6. legend-planning
  7. ポスティングこころざし様
  8. インテリアコーディネーター小島真子

最近の記事

  1. SEO対策の平均費用
  2. セルフSEO対策
  3. STORES 予約
  4. 無料で予約サイトが作れる【MOSH】
  5. 第三者の影響力 ウィンザー効果
  6. 『お客様の声』アンケート
  7. コアウェブバイタル(Core Web Vitals)
  8. FAQリッチリザルト
  9. WordPress
  10. Ameba Ownd(アメーバオウンド)