hoverするとfilter効果爆発!円形画像が1000%浮き出るCSSアニメーション【解説付き】

今回はradiusを使ったスタイリッシュな円形の画像レイアウトにfilter:grayscale、contrast、saturateの3つを効かせた贅沢なCSSアニメーションを実装しました。

hoverした画像にコントラストと彩度がかかり、hoverしていない画像にモノクロ補正がかかるように調整しています。

display:flexを使用して画面のど真ん中に設置されるように調整しています。

htmlとcssだけしか使っていません。
コードの説明や実際の動きも詳しくまとめてみたので自由にお使いください。

こちらのエフェクトのコードはすべて完全オリジナルなのでコピペ大歓迎です。

 

この記事の目次

filterを贅沢に使ったCSSアニメーションレイアウト

  1. エフェクトの確認
  2. コードの確認
  3. このエフェクトのポイント!

 

1. hoverするとfilter効果で円形画像が1000%浮き出るレイアウト

下の画像のようになります

実際の動きはこちら

 

コードの確認

 

<div class="pic-background">
  <div class="pic">
    <b-img src="https://source.unsplash.com/1000x802" fluid alt="Fluid image"></b-img>
  </div>
  <div class="pic">
    <b-img src="https://source.unsplash.com/1000x801" fluid alt="Fluid image"></b-img>
  </div>
  <div class="pic">
    <b-img src="https://source.unsplash.com/1000x800" fluid alt="Fluid image"></b-img>
  </div>
</div>
body{
  background:#f1f1f1;
  font-family: 'Inconsolata', monospace;
  font-weight:bold;
  color:gray;
  text-align:center;
  -webkit-font-smoothing: antialiased;
}
.pic-background{
  /* flexboxでcontainerの中身をど真ん中に設置 */
  display:flex;
  align-items:center;
  justify-content:center;
  margin-top: 100px;
}
/* 画像自体の調整 */
.pic img {
  width:100%;
  height: 37vh;
  border-radius: 200px;
  /* ボーダーにradiusで丸みをつける */
}
/* 画像の外枠の調整 */
.pic{
  padding:15px;
  margin:1%;
  background:white;
  width:29%;
  height: 41vh;
  border:1px solid #d6d6d6;
  box-shadow:0 2px 3px 0px rgba(0,0,0,0.25);
  /* ボックスに影をつける(左から水平方向の長さ、垂直方向の長さ、ぼかしの長さ、ぼかしの広さ、色) */
  border-radius:200px;
  /* ボーダーにradiusで丸みをつける */
  transition: 0.3s;
  /* スライド時にかかる時間を0.3秒に指定 */
}
.pic-background:hover .pic{
  filter:grayscale(100%) contrast(100%) saturate(100%);
  /* hover前:filterプロパティの「モノクロ」+「コントラスト」+「彩度」を調整 */
  transform: scale(.98);
  /* 収縮率を指定 */
  box-shadow:none;
}
.pic-background:hover .pic:hover{
  filter:grayscale(0%) contrast(120%) saturate(120%);
  /* hover後:filterプロパティの「モノクロ」+「コントラスト」+「彩度」を調整 */
  transform:scale(1);
  /* 収縮率を指定 */
  box-shadow:0 8px 20px 0px rgba(0,0,0,0.125);
  /* ボックスに影をつける(左から水平方向の長さ、垂直方向の長さ、ぼかしの長さ、ぼかしの広さ、色) */
}
ここがポイント!
  1.  display:flex;でど真ん中に設置
  2.  box-shadowで奥行きをつけて立体感を演出
  3. border-radiusを最大にし、widthとheightを調整することで真丸にした
  4. filter:grayscale、contrast、saturateでhoverした画像にコントラストと彩度がかかり、hoverしていない画像にモノクロ補正がかかるように調整(filterの使い方については【filter完全網羅】hoverでボタンが動き出す!filterを網羅できるCSSボタンアニメーション15選)
  5. transform: scaleで画像をhoverした時にhoverしていない画像が縮小するように調整(transformの使い方については【transform完全網羅】hoverで動き出す!transformを網羅できるCSSボタンアニメーション16選)
  6. opacityで画像をhoverした時にhoverしていない画像が透過するように調整
  7.  transitionで開始から終了までの十分な時間を設定し滑らかなアニメーションを実現
  8. widthとheightを調整しレイアウトを整えた

参考

そもそもWebデザインの基礎がわからない。。
そんなあなたにはこれ!

ふたご


でもなあ、独学だと心配だしプログラミングスクールで学びたい!。かといってお金はかけたくないし。。
そんなあなたにはこれ!

ふたご

完全無料で一人前のエンジニアになれるプログラミングスクールあります
  1. プログラミング学習&サポートが無料!
  2. 誰もが知っている超優良企業への就職サポート付き!
  3. 学習言語:Java、PHP、HTML、CSSなど

 

   話だけ聞いてみる