CSS

【CSS】CSSイメージホバーエフェクトライブラリimagehover.css

August 16, 2016
imagehover

imagehoverは軽量で簡単にホバー効果を実現するためのCSSイメージホバーエフェクトライブラリ。

CSS

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

HTML

<figure class="imghvr-fade">
  <img src="#">
  <figcaption>
    // Hover Content
  </figcaption>
</figure>

リンクの追加

  <figure class="imghvr-fade">
    <img src="#">
    <figcaption>
      // Hover Content
    </figcaption>
    <a href="http://www.imagehover.io"></a>
  </figure>

背景色

  <figure class="imghvr-fade" style="background-color:#D14233;">
    <img src="#">
    <figcaption>
      // Hover Content
    </figcaption>
  </figure>

Style

[class^='imghvr-'],
[class*=' imghvr-'] {
  background-color: #D14233;
}

MITライセンス