CSSで画像(img)をマウスホバーした時に変な線が出るエラーの対処法
今回はcssでimgなどの画像をマウスホバーした時、その画像の下側に浮かび出てくる変な線（太い領域）のエラーについて対処法を記事にします。
詳細
どんなエラー？
こちらのようにimg画像があるとします。ここにマウスホバーをすると・・・
このように画像の下部分に変な線が浮かび上がります。（図では緑色になっています。）
対処法
答えはcssで該当するimgをブロック要素にすることです。（display:block;にする。）imgはインライン要素ですので、imgにアンカー（aタグ）をつけてマウスホバー(a:hover)で背景の変化をつけようとすると上記のエラーがほぼほぼ起きてしまいます。とくにcss3では画像に対してopacityでマウスホバー時に透過性を与えたい時などに同様のエラーが起きやすいです。ブロック要素とインライン要素を見極めて快適なcssライフを送りましょう！