2017.02.06TwitterFacebookGoogle+はてブPocketスポンサードリンク画像にマウスオーバーしたときにキャプションを出現させる方法です。今回はキャプションの動きを2種類紹介します。CodePen.画像をマウスオーバーすると、画像の内側に影が浮かび上がると同時にキャプションが出現します。class="thumbnail"></div>の中に定義しています。100%;}.captionをheight:100%;,width:100%で、.thumbnailいっぱいに広げています。タイトルはサムネイルの下端に表示されるように、bottom:0;としています。});});mouseover$captionをマウスオーバーすると、$captionがふわりと浮かび上がります。600);})mouseout$captionをマウスアウトすると、$captionが静かに消滅します。600);});1つ目のキャプション表現はここまでです。CodePen.1つ目との違いは、マウスオーバーするとキャプションが左から出現する点です。HTMLHTMLは1つ目のものと全く同じです。span{}に以下の一行を追加するだけです。});});マウスオーバー・マウスアウト時に影とタイトルを順番に表示させるため、各animateメソッドの第二引数のオプション内でqueue:falseを指定しています。queueをtrueとすればanimateメソッドが同時に実行されます。以上で、画像にマウスオーバーでキャプションを出現させる方法を終わります。WATANABE1北海道在住。HTML+CSS+JavaScriptによるコンテンツ制作を行なっている。脱初心者を目標に、今後も次々とコンテンツを制作し、スキルを高めていきたい。