下記リンクの別ブログで映画のレビューを書いているのですが、そのトップ画面についてご質問をいただきましたので方法をまとめました。
このサイトは、はてなテーマストアで公開している「Simple Responsive with Menubar」をベースに色々手を加えているものです。
で、ご質問いただいたのは、「当サイトおすすめ映画直近の４作品」として４つ並べている画像のホバーエフェクトの方法です。
基本は３層のレイヤー
考え方はいろいろあると思いますが、いずれにしても、何層かのレイヤー（要素）を css の :hover 擬似クラスで、表示したり、非表示にしたり、透明度を変えたりすることになります。
今回の場合、通常は、
- 最下層の div.rcm-box に色を指定
- その上に画像（opacity:1）
- その上にテキスト（opacity:0）
としておき、マウスオーバーで、
- 画像の opacity を 0.3 に
- テキストの opacity を 1 に
として実現しています。ポイントは、テキストレイヤー div.rcm-overlay を画像の上下左右中央に表示するところかと思います。
See the Pen BjJgda by ausnichts (@ausnichts) on CodePen.
アニメーションで見た目をかっこ良くする
これに、transition を使って次の要素をアニメーションさせます。
- 画像の透明度
- 画像の拡大
- テキストの拡大と色
- ボタンの拡大と背景色
See the Pen zrpXeg by ausnichts (@ausnichts) on CodePen.
出来上がりました。
はてなブログのトップ画面だけに表示する
「そんなには褒めないよ。映画評」では、これを次の方法でトップ画面だけに表示するようにしています。
- タイトル下に html コードを入れ、div#recommend でくくる
- css でトップ画面のみ表示する
#recommend { display: none; } .page-index #recommend { display: block; }
後は位置やサイズを調整し、メディアクエリを使用してデスクトップではフロートさせるなどの指定をすれば完成します。
なお、こちらのブログもよろしく！