[CSS]画像のキャプションをいい感じのアニメーションで表示するシンプルなホバーエフェクトシンプルな実装で、画像のキャプションを美しいグラデーションのパネルにアニメーションで表示するシンプルなホバーエフェクトを紹介します。 イラストは、以前紹介した「Girls Design Materials」です。 生き生きとした表情やしぐさが魅力たっぷりなガーリー素材 実装 Step 1: HTML 画像とキャプション（見出しとテキスト）をセットに、a要素で括り、全体をdiv要素で内包します。 <div class="tiles"> <a href="#" class="tile"><img src="image.jpg"/><div class="details"><span class="title">見出し</span><span class="info">テキスト</span></div></a> <a href="#" class="tile"><img src="image.j
![[CSS]画像のキャプションをいい感じのアニメーションで表示するシンプルなホバーエフェクト](https://cdn-ak-scissors.b.st-hatena.com/image/square/7d14cfd8cfb42f5fa0f7e47f51d65deba2b7b942/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201502%2F2015061000.gif)
CSSの実用的なテクニックから素晴らしいアイデアまで！スタイルシートの最新テクニックのまとめ
[CSS]写真画像の背景やフラットなスタイルのWebデザインにぴったりなゴーストボタンの実装方法のまとめ![[CSS]写真画像の背景やフラットなスタイルのWebデザインにぴったりなゴーストボタンの実装方法のまとめ](https://cdn-ak-scissors.b.st-hatena.com/image/square/e899eb8da8739d23bb0715fe273fb5e1d72d6be1/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201501%2F2015011500.gif)
