【CSS】画像のマウスホバーアクション 〜初心者向け（コピペOK）〜
こんにちはふるぽんです。
自分のための忘備録として書いてみます。
もくじ
マウスを画像にホバーした時に使えるアクションをご紹介します。
マウスホバーして画像にマスクをかける
具体的には以下のようになります。
上からカーテンがかかる感じですね。
position: absolute;
top:-100%;
ととして、上に押し上げて見えなくしています。
ホバーしたら
top：0％；
で上から降りてくる感じです。
See the Pen
Untitled by ふるぽん@webを創作する男 (@furup0n)
on CodePen.
マウスホバーしたら画像が大きくなる
次もよくみるやつですね。
ホバーしたら画像が拡大されるCSSです。
over-flow:hidden;
ではみ出た要素は表示させないのがポイントですね。
See the Pen
画像拡大 by ふるぽん@webを創作する男 (@furup0n)
on CodePen.
ホバーしたら文字が表示される
これもよく見ますね。
See the Pen
Untitled by ふるぽん@webを創作する男 (@furup0n)
on CodePen.
40代で僕がWeb制作を仕事にできた方法
以下は僕が実際に勉強した方法です。Web制作を勉強して副業にしましょう！
読むだけでは成功はしません
40代からはじめる副業！プログラミング学習してWebサイト制作で月10万稼ぐ方法 – ふるぽんブログ
44歳の僕でも独学でプログラミング学習をはじめて、初案件から半年で、100万円以上売り上げました。 40代の方はもちろん、それ以外の方のお役に立てればと思います。Web制作は再現性が高く、副業に最適かとおもいます。40代以上のWeb制作で月10万稼ぐまでのステップアップとプログラミング学習の心得を解説していきます。
さばかんブログ - ビットコインなどの仮想通貨とNFT、おすすめの副業などの情報を発信
仮想通貨（暗号資産）初心者のあれこれを発信します。仮想通貨を勉強したい方、これからビットコインなどを始めたい方への記事を、初心者にも分かりやすく解説していきます。
ゲームで仮想通貨の不労所得を稼ぐ【オンラインカジノBetfuryのやり方】