パーツ番号 07-11-07 ・ CSSのみ

モノクロ→カラー変化画像

普段はグレースケールの画像が、ホバーすると鮮やかなカラーに変わる演出です。WordPressのBefore/After風コンテンツやトップページの静かなギャラリーにアクセントを加えられます。

hovercss

プレビュー

ソースコード

HTML

<div class="d07-11-07-frame">
          <div class="d07-11-07-img"></div>
        </div>

CSS

.d07-11-07-frame{width:220px;height:150px;border-radius:10px;overflow:hidden;box-shadow:0 4px 14px rgba(0,0,0,.14)}
        .d07-11-07-img{width:100%;height:100%;background:linear-gradient(135deg,#ff9a56,#ff6a88,#845ec2);filter:grayscale(1);transform:scale(1.02);transition:filter .5s ease,transform .5s ease}
        .d07-11-07-frame:hover .d07-11-07-img{filter:grayscale(0);transform:scale(1.08)}

クラス名 .d07-11-07 は本ライブラリ内での識別用です。複数のパーツを同じページで使う場合は、重複しないよう名前を変更してください。