今回は【レスポンシブ対応】transform scaleとfilterでオシャレなCSS画像一覧アニメーション4選をご紹介。シンプルかつオシャレなデザイン。それぞれ違うエフェクト。実務で使える。ポートフォリオにも最適。コピペOK。HTML, CSSだけ
コードの説明や実際の動きも詳しくまとめてみたので自由にお使いください。
こちらのデザイン・コードはすべて完全オリジナルなのでコピペ大歓迎です。
この記事の目次
【レスポンシブ対応】transform scaleとfilterでオシャレなCSS画像一覧アニメーション4選
1. transform scaleとfilter grayscaleでオシャレな画像一覧アニメーション
動きは下の画像のような感じになります
実際の動きはこちら
コードはこちら
ここがポイント!
- 画像を複数用意し中央に配置する
- 各々のwidth, heightを%表記としレスポンシブ対応
- hover前後のtransform: scaleを調整することで画像が拡大
- hover前後のopacityを調整
- hover前後のfilter: grayscale(白黒度合い)を調整することで画像を強調
- transitionで滑らかなアニメーションを実現
2. transform scaleとfilter blurでぼやける画像一覧アニメーション
動きは下の画像のような感じになります
実際の動きはこちら
コードはこちら
ここがポイント!
- 画像を複数用意し中央に配置する
- 各々のwidth, heightを%表記としレスポンシブ対応
- hover前後のtransform: scaleを調整することで画像が拡大
- hover前後のopacityを調整
- hover前後のfilter: grayscale(白黒度合い) saturate(彩度) blur(ぼやけ度合い)を調整することで画像を強調
- transitionで滑らかなアニメーションを実現
3. transform scaleとfilter hue-rotateで色相回転する画像一覧アニメーション
動きは下の画像のような感じになります
実際の動きはこちら
コードはこちら
ここがポイント!
- 画像を複数用意し中央に配置する
- 各々のwidth, heightを%表記としレスポンシブ対応
- hover前後のtransform: scaleを調整することで画像が拡大
- hover前後のopacityを調整
- hover前後のfilter: grayscale(白黒度合い) saturate(彩度) hue-rotate(色相回転)を調整することで画像を強調
- transitionで滑らかなアニメーションを実現
4. transform scaleとfilter grayscale saturate contrast brightnessで輝く画像一覧アニメーション
動きは下の画像のような感じになります
実際の動きはこちら
コードはこちら
ここがポイント!
- 画像を複数用意し中央に配置する
- 各々のwidth, heightを%表記としレスポンシブ対応
- hover前後のtransform: scaleを調整することで画像が拡大
- hover前後のopacityを調整
- hover前後のfilter: grayscale(白黒度合い) saturate(彩度) contrast(コントラスト) brightness(明るさ)を調整することで画像を強調
- transitionで滑らかなアニメーションを実現
参考
そもそもWebデザインの基礎がわからない。。
そんなあなたにはこれ!
未経験からWeb制作で月50万稼げるようになったUdemy教材3選
でもなあ、独学だと心配だしプログラミングスクールで学びたい!。かといってお金はかけたくないし。。
そんなあなたにはこれ!
完全無料で一人前のエンジニアになれるプログラミングスクールあります