パーツ番号 07-11-11 ・ CSSのみ
ホバーで切り替わるビフォー/アフター画像
マウスを乗せている間だけ「アフター」画像がスライドインして重なる比較演出です。WordPressのリフォーム施工事例やダイエット系ビフォーアフターコンテンツに使えます。
プレビュー
ソースコード
HTML
<div class="d07-11-11-frame">
<div class="d07-11-11-before"></div>
<div class="d07-11-11-after"></div>
<span class="d07-11-11-label-before">BEFORE</span>
<span class="d07-11-11-label-after">AFTER</span>
</div>CSS
.d07-11-11-frame{position:relative;width:220px;height:150px;border-radius:12px;overflow:hidden;box-shadow:0 6px 18px rgba(0,0,0,.14)}
.d07-11-11-before{position:absolute;inset:0;background:linear-gradient(135deg,#9ca3af,#6b7280)}
.d07-11-11-after{position:absolute;inset:0;background:linear-gradient(135deg,#34d399,#10b981);transform:translateX(-100%);transition:transform .55s cubic-bezier(.2,.7,.3,1)}
.d07-11-11-frame:hover .d07-11-11-after{transform:translateX(0)}
.d07-11-11-label-before,.d07-11-11-label-after{position:absolute;top:8px;font-size:9px;font-weight:700;letter-spacing:.08em;color:#fff;background:rgba(0,0,0,.4);padding:2px 8px;border-radius:99px;transition:opacity .4s ease}
.d07-11-11-label-before{left:8px}
.d07-11-11-label-after{right:8px;opacity:0}
.d07-11-11-frame:hover .d07-11-11-label-before{opacity:0}
.d07-11-11-frame:hover .d07-11-11-label-after{opacity:1}クラス名 .d07-11-11 は本ライブラリ内での識別用です。複数のパーツを同じページで使う場合は、重複しないよう名前を変更してください。