ホバーでボックスがひっくり返り内容が見えるお知らせ欄

MATEREATE INFORMATION

ホバーエフェクトによりボックスがひっくり返る演出するオシャレなレイアウトの無料Web素材です。表には記事のタイトルとアイキャッチ画像、裏には日付と記事の概要や抜粋を表示するデザインとなっております。たくさんの情報を限られたスペースに一度に表示できるため、サイト閲覧者にも優しいWeb素材となっております。

素材の詳細

infoボックスの表側のデザイン
エフェクト開始時

通常はアイキャッチ画像と記事のタイトルのみのシンプルなデザインとなっております。マウスホバーすることでエフェクトが開始されボックスの縦軸を中心に回転します。

infoボックスの裏側のデザイン
エフェクト終了時

ボックス全体がひっくり返り、日付と内容が表示されるデザインとなります。ボタンはホバーすることで背景色が変化します。また文章が長くなる場合は、自動でスクロールバーが追加されます。