マウスホバーするとボーダーがアニメーションで太くなるサムネイルの作り方 | ダイナシイエスタデイサムネイル画像にマウスを合わせたとき、それがリンクになっていることをユーザーに分かってもらう必要があります。CSSによって透明度を変えるのがもっとも一般的かと思いますが、今回は画像をボーダーで囲み、マウスホバーするとボーダーがアニメーションでにゅっと太くなるサムネイルの作り方をご紹介します。 デモページ まずは仕組みから 仕組みは至ってシンプルです。position:relative;を指定した親要素の中に、絶対配置(position:absolute;)で画像を入れたブロック要素とdisplay:block;でブロック要素化したa要素を重ねます。HTMLソース内で画像のブロック要素の後にa要素を記述すれば、特にスタイル指定しなくてもa要素が上に重なります。 CSSでは通常時(マウスホバーしていない状態)のスタイルを指定しておきます。これにjQueryでマウスホバー時のボーダーのアニメーシ
