กำหนดรูปให้วิบวับ มีลูกเล่นด้วยการกำหนด opacity ใน CSS การกำหนดความทึบ (opacity) ใน CSS คือการกำหนดค่าความโปร่งใสของอิลิเมนต์ HTML ด้วย CSS โดยใช้คุณสมบัติ opacity ซึ่งเป็นตัวเลขระหว่าง 0 ถึง 1 โดยที่ 0 จะหมายถึงอิลิเมนต์โปร่งใสสุด และ 1 จะหมายถึงอิลิเมนต์ทึบสุด โดยมีรูปแบบการใช้งานดังนี้:
selector { opacity: value; }
โดยที่:
value: กำหนดค่าความทึบของอิลิเมนต์ โดยเป็นตัวเลขระหว่าง 0 ถึง 1 (ค่าเริ่มต้นเป็น 1)
ตัวอย่างการใช้งาน:
.box { opacity: 0.5; }
โค้ดด้านบนจะกำหนดให้กล่องที่มีคลาส .box มีความทึบเป็น 0.5 หรือความโปร่งใส 50%
หลังจากที่เรากำหนด opacity ของภาพแล้ว ใช้ hover ตามด้วยก็จะทำให้ภาพสลับดูมีลูกเล่นขึ้น
รูปแรก กำหนด opacity = 0.7
รูปที่สอง กำหนด opacity = 1
การกำหนดความทึบจะส่งผลกระทบต่ออิลิเมนต์ทั้งหมดภายในตัวเดียวกัน ไม่ว่าจะเป็นข้อความ รูปภาพ หรือสิ่งต่างๆ ที่อยู่ภายในอิลิเมนต์นั้นๆ