マウスオーバーで画像アニメーション表示する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. handy-collapse

    アコーディオンメニュー内にアコーディオン【handy-collapse…

  2. tilescolumns-unite-gallery

    スマホ時にスワイプにも対応👆グリッドギャラリー【Til…

  3. hes-gallery-master

    モバイル対応レスポンシブギャラリー【HesGallery】

  4. フォトギャラリー

    写真アルバム・フォトギャラリー作成・サンプル集 JavaScript・…

  5. vanilla-zoom-js

    Vanilla JavaScriptでズーム可能な画像ギャラリー【va…

  6. jQueryプラグイン Image Photo

    jQueryプラグイン サンプル集

制作実績一覧

  1. bacchus
  2. ふじぜんリニューアル後
  3. legend-planning
  4. ポスティングこころざし様
  5. インテリアコーディネーター小島真子

最近の記事

  1. tech-kids-school
  2. セールスライティング
  3. キーワードの選び方
  4. YouTube 集客
  5. 幼児のプログラミング教育
  6. E-A-T(専門性・権威性・信頼性)
  7. ホームページ集客
  8. instagram
  9. ameba-seo
  10. 開業
人気の記事 おすすめ記事
  1. フォトギャラリー
  2. 高い広告費に悩むサロン店主
  3. 広告費
  4. SEO評価を下げる低品質コンテンツ
  5. 文字装飾
  1. ブログの見出し
  2. ブログタイトル
  3. 集客ブログの作り方
  4. ブログ集客方法・パソコン操作
  5. 高い広告費に悩むサロン店主