วิธีเพิ่ม Visual Effects ให้รูปภาพด้วย CSS Filter

ใช้ CSS filter property ใส่เอฟเฟกต์ต่างๆ ให้รูปภาพ เช่น Invert, Blur, Sepia, Brightness, Contrast ได้ทันที

ตัวอย่างโค้ด (Invert)

<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> img{    margin: 20px; } img.normal{    margin-left: 30%;    width: 300px;    height: 300px; } img.filter {    width: 300px;    height: 300px;    filter: invert(100%); } </style> </head> <body> <h1 style="text-align: center;">CSS Image effects example</h1> <img class="normal" src="https://i.picsum.photos/id/237/536/354.jpg"> <img class="filter" src="https://images.pexels.com/photos/237/536/354.jpg"> </body> </html>

CSS Filter Functions พื้นฐาน

รวมหลาย Filter

img { filter: grayscale(50%) blur(2px) contrast(150%); }

ผลลัพธ์

รูปสุนัข 2 รูป: ปกติ และ Invert 100% (สีกลับกันทั้งหมด)

วิธีสร้างรูปภาพขาวดำ (Black & White Image) ด้วย CSS Filter

วิธีสร้าง Image Overlay Icon Effect (ไอคอนทับรูปเมื่อ Hover) ด้วย CSS