【HTML&CSS】カーソルが要素に触れたら、要素を大きくする方法、透明度を下げる方法をまとめて紹介！

どうも皆さんこんにちは！kwです！

今回はカーソルが要素に触れた際に、要素を大きくする方法や、要素の透明度を下げる方法を紹介します。

これもよく使う技術なので覚えておきましょう！

1.要素を大きくする方法

まず、カーソルが要素に触れた際に要素を大きくする方法について解説していきます。

今回要素を大きくする方法、透明度を下げる方法を解説していくにあたって、hoverというのを使います。

hoverの主な使い方は、カーソルが要素に触れた時、どのような処理をするのかを設定することができます。

では、早速要素を大きくするためにhoverを使いましょう。

要素を大きくするには、このようにします↓

See the Pen Untitled by kw (@kw-webd) on CodePen.

画像にカーソルを合わせてみてください。

どうでしたか？大きくなりましたよね？hoverはこのように使います。

今回はhover中の画像を20px大きくするという命令をコンピューターに出しました。

では、透明度を下げるのはどうすればいいのでしょうか。

2.透明度を下げる

hoverした時に透明度を下げたい場合は、opacityを使います。

具体的な使い方は、こんな感じです↓

See the Pen Untitled by kw (@kw-webd) on CodePen.

画像にカーソルを合わせてみてください。

どうでしたか？透明度が下がりましたね！

今回は、opacity:0.7;という風に記述しましたが、他の値でも可能です

。実際に他の値を入れてみましょう。

こんな感じです↓

See the Pen Untitled by kw (@kw-webd) on CodePen.

少しコードが複雑になってしまいましたが、なんとなくイメージを掴んでもらえたでしょうか？

hoverの使い方は従来のCSSの書き方と違って少し特殊なのですが、これからウェブデザインを学んでいく人には必要不可欠な技術なのでぜっっっっっったいに覚えておいてください！（笑）

3.まとめ

今回は、カーソルが要素に触れたら、要素を大きくする方法、透明度を下げる方法をまとめて紹介しました。

なかなか見ない表現もあったかと思いますが、覚えておくと1000万倍デザインの幅が広がるので絶対に覚えておいてくださいね！

ここまで読んでくれた方、ありがとうございました！！！