Overlay (เลย์เยอร์ทับ) เป็นเอฟเฟกต์บนเว็บไซต์ที่นำทางผู้ใช้ไปยังการกระทำถัดไป การใช้งานที่ถูกต้องสร้างประสบการณ์ผู้ใช้ดี ทำให้ผู้ใช้อยู่บนนานขึ้น
มีหลายวิธีสร้าง overlay — ไม่มีวิธีเดียวที่ถูกต้อง ขึ้นอยู่กับความต้องการของเว็บไซต์
คู่มือนี้เน้นใช้ HTML และ CSS เพียงอย่างเดียว (ไม่ใช้ JavaScript) เพื่อสร้างเอฟเฟกต์ overlay เมื่อวางเมาส์เหนือรูปภาพ
1. วางโครงสร้าง HTML (Block Out HTML)
สร้าง HTML boilerplate สำหรับ image overlay:
<html> <head> <style> /* CSS จะเพิ่มภายหลัง */ </style> </head> <body> <div class="container"></div> </body> </html>
2. เข้าใจปัญหาก่อนเขียนโค้ด
ควรคิดก่อนว่าจะแก้ปัญหาอย่างไร: overlay ทับคอนเทนเนอร์ (รูปภาพ) และทำอะไรเมื่อ hover — นำทางผู้ใช้ให้โต้ตอบ
มองภาพใหญ่: มีรูปภาพและ overlay — อย่างน้อย 2 คอนเทนเนอร์ และทั้งคู่ต้องอยู่ในคอนเทนเนอร์ใหญ่กว่า
โครงสร้าง HTML ที่แนะนำ:
<div class="container"> <div class="overlay-outer"> <img class="item-to-overlay" src="file-here" alt="this-is-our-image" /> <div class="overlay-inner"> This is our overlay div. </div> </div> </div>
3. จัดสไตล์ CSS (จากนอกเข้าด้านใน)
Body
body { background-color: gray; max-width: 800px; width: 100%; margin: 0 auto; }
Div.container
div.container { width: 100%; }
Div.overlay-outer (สำคัญที่สุด)
div.overlay-outer { width: 50%; height: 400px; position: relative; }
กำหนดขนาด และ position: relative เพื่อเป็น "รั้ว" ให้รูปภาพและ overlay
Img
รูปภาพต้องมี width/height เท่ากับคอนเทนเนอร์ สามารถเพิ่ม border และ crop ได้
Div.overlay-inner
div.overlay-inner { background-color: #9c1203; height: 100%; width: 100%; opacity: 0; top: 0; left: 0; position: absolute; padding: 0; }
จุดสำคัญ: position: absolute ร่วมกับ top: 0; left: 0 วางบน overlay-outer ที่เป็น position: relative
Div.overlay-inner p
จัดสไตล์เนื้อหาภายใน overlay
Hover Effect
.overlay-outer:hover .overlay-inner { opacity: .8; transition: opacity .5s; }
opacity 0-1 ทำให้พื้นหลังโปร่งแสง transition ทำให้สลับนุ่มนวล
ตัวอย่างสมบูรณ์
<html> <head> <style> * { box-sizing: border-box; } body { background: grey; max-width: 800px; height: 1000px; } .outside { width: 75%; height: 400px; display: inline-block; position: relative; cursor: pointer; } .images { width: 100%; height: 400px; object-fit: cover; border: 5px double black; } .inside { background-color: #9c1203; height: 100%; width: 100%; opacity: 0; top: 0; left: 0; position: absolute; padding: 0; } .inside p { color: #fff; line-height: 150px; font-family: 'arial'; padding: 20px; text-align: left; } .outside:hover .inside { opacity: .8; transition: opacity .5s; } </style> </head> <body> <div class="container"> <h1>CSS Overlay</h1> <div class="outside"> <img class="images" src="..." alt="this-is-our-image" /> <div class="inside"> <p>This is an overlay!</p> </div> </div> </div> </body> </html>
สรุป
คุณสร้าง CSS overlay สำเร็จแล้ว! ใช้คุณสมบัติ CSS หลายอย่าง: transition, position, object-fit, width, height ฯลฯ บทความนี้สอนวิธีคิดปัญหา วางโครงสร้าง HTML และจัดสไตล์ CSS ลองปรับแต่งในโค้ดเอดิเตอร์เพื่อสร้างเวอร์ชันของตัวเอง
