creatersnest

【CSS】オンマウスで画像にふわっと白いエフェクトがかかるようにしてみよう!


画像にマウスオーバーした時に、
白くふわっとエフェクトが掛かっているサイトを見かけたことはありませんか?

実はこちらcssだけで簡単に実装できてしまいます!
今回はcssだけで画像に白い半透明のマウスオーバーを実現する方法をご紹介します。

 

実際には半透明の白を重ねているのではなく、
画像の透明度「opacity」を変えて表現します。
今回はtransitionを使ってアニメーションをつけながらopacityの数値を変えてみます。

サンプル

 

transition

サンプル
transition効果(時間的変化)をまとめて指定します。
transitionについてはこちらから詳しく確認することができます。

 

 

opacity

サンプル
要素の透明度を指定します。
opacityについてはこちらから詳しく確認することができます。

 

 

サンプルコード

まずはhtml部分から記載していきます。

次にcss部分です。

こちらのサンプルコードは背景色が白系の場合のものです。
背景色が黒などの場合は「background-color」を白色に指定し、
「display:block;」を追加します。
背景色に違う色を使いたい場合はこちらを参考にしてください!

 

 

まとめ

如何だったでしょうか?
よくサイトで見かけるアニメーションですが、
こんなに簡単に実装できてしまいます。

 

これを機にオンマウス時のアニメーションで、
いろいろ遊んでみるのも楽しいかもしれませんね!

本サイトが運営するWebデザインのオンラインスクールが公開中!
以下のリンクからお申込みで、特別料金の70%OFF!

未経験からプロのWebデザイナーになる! 400レッスン以上の完全マスターコース
こちらのコースは全くの未経験の方が、プロのWebデザイナーとして働けるレベルになることを目的としたコースです。
・全422レッスン & 42時間! 通学スクール80万円相当の内容
・授業×チャレンジ課題で実践的なスキルが身につく!
・過去1100名以上のスクール卒業生を輩出した、 Webサービス運営企業・デザイナー輩出企業だからこそ作れるプログラム

Webやアプリの最新デザインツール Sketch3 |100レッスンの完全マスターコース
Sketch3未経験からプロレベルを目指す、充実したコースです。
Sketch3の単なる機能説明をするような、つまらないコースではなく、アイコン制作、ボタン作成、メインビジュアル制作、Webページの制作など、実際の制作をしながら実践力を身につけます。
1000名以上の卒業生がいる実績ある日本のWebデザインスクールが提供しています。


Next Articleスマートフォンサイトの表示速度を速くする小技まとめ