マウスオーバーで画像アニメーション表示する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. レスポンシブ ポラロイドギャラリー【Vintalight】

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

  2. collapsible

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

  3. tilescolumns-unite-gallery

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

  4. jQueryプラグイン Image Photo

    jQueryプラグイン サンプル集

  5. zoomwall_js

    CSS ポップアップ フォトギャラリー【 zoomwall.js 】

  6. accordion_jsjavascript & CSS 超シンプル スライディング アコーディオン

    javascript & CSS 超シンプル スライディング…

制作実績一覧

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

最近の記事

  1. LINE公式アカウント
  2. Google Maps
  3. youtube seo
  4. アーテック・エジソンアカデミー
  5. パズル×ロボット×プログラミング 3つとも学習できる小学校低学年向け教室
  6. z会子供プログラミング講座
  7. embot
  8. カルチャースクール
  9. 外壁塗装
人気の記事 おすすめ記事
  1. フォトギャラリー
  2. 高い広告費に悩むサロン店主
  3. 広告費
  4. SEO評価を下げる低品質コンテンツ
  5. 文字装飾
  1. ブログの見出し
  2. ブログタイトル
  3. 集客ブログの作り方
  4. ブログ集客方法・パソコン操作
  5. 高い広告費に悩むサロン店主