画像のレイアウト - 趣味サイトのためのCSS3講座

サイト内に画像を載せる場合、あらかじめ画像のサイズを調整しておけばその通りのサイズで表示されますが、大きいサイズの画像はスマートフォンなどの画面サイズに合わせて見やすく表示させる必要があります。（これを「レスポンシブデザイン」といいます）
画像サイズをレスポンシブデザインに適用させる場合、「width: 100%」「height: auto」で基本的には画面サイズいっぱいの横幅・それに合わせて高さは自動調整で表示されるようにします。しかし、これだとパソコンやタブレットでは大きくなりすぎてしまうので、「max-width: 450px」というように指定し、一定のサイズ（ここでは450px）を超えないようにしておきます。

「img:hover { opacity: 数値 } 」で、画像の上にマウスが乗ったとき、もしくは画像をタップしたときに画像を薄くして「この画像はクリックできる」ということをユーザーに伝えることができます。（文字にも適用できます）
数値は0〜1の間で指定し、0に近づくほど薄くなります。