本のように開き中身が見えるコンテンツボックス

MATEREATE INFORMATION

画像をホバーすると本のように開き内容が見えるレイアウトボックスのWeb素材です。CSSのみで表現しているので手軽に実装でき、さらにSEOにも優しい素材となっております。本の表紙部分となる画像には、コンテンツのイメージ画像。内容部分にはコンテンツの概要を入れるなど様々な場面で活用できると思います。

素材の詳細

通常時のデザイン表示イメージ
通常時のデザイン

画像が表示されるだけのシンプルなデザインとなっております。ホバーするとアニメーションし、本が開くような演出をします。

ホバーした時のデザイン表示イメージ
画像をホバーした時のデザイン

画像の上にマウスを乗せると、画像が本を開いたようなアニメーションをし、コンテンツの抜粋・本文などを閲覧できるようになります。

スマホ画面でのデザイン表示イメージ
スマホ画面でのデザイン

スマホ画面でもパソコン画面と同じアニメーションをいたします。上記画像のように内容は見えますが、画像は画面外にはみ出します。

文章が長い場合のデザイン表示イメージ
内容が長い場合のデザイン

コンテンツの内容が長い場合は、内容部分にだけスクロールバーが出現するので、デザインを崩すことなく、全ての文章を読むことができます。