ใช้คุณสมบัติ border เพื่อเพิ่มเส้นขอบให้รูปภาพ (<img>) ตัวอย่างโค้ด <!DOCTYPE html> <html> <head> <style> img {    border: 8px solid rgb(0, 238, 255);    width: 400px;    height: 400px; } </style> </head> <body> <h1&g

สร้างหน้า Meet The Team ที่ Responsive ด้วย HTML และ CSS ใช้ Flexbox/Float layout และ Media Queries ตัวอย่างโค้ด <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> html {    box-sizi

ใช้ CSS position: sticky; top: 0; ทำให้รูปภาพ ติด อยู่ที่ตำแหน่งเมื่อ Scroll จนถึงขอบบน แล้วคงที่ไว้จน Scroll ผ่านไป ตัวอย่างโค้ด <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> img {  

ใช้ CSS transform: scaleX(-1) กลับภาพแนวนอน (Mirror Effect) เมื่อ Hover ตัวอย่างโค้ด <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> img:hover {    transform: scaleX(-1);   &n

ใช้ CSS @keyframes และ animation สร้างเอฟเฟกต์รูปภาพสั่น (Shake) เมื่อ Hover ตัวอย่างโค้ด <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> img{    width: 400px;    height:

สร้าง Portfolio Gallery แบบ Grid Responsive: 4 คอลัมน์บน Desktop, 2 คอลัมน์บน Tablet, 1 คอลัมน์บน Mobile ใช้ Float + Media Query ตัวอย่างโค้ด <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1" /> <style>

วาง Form ลงบนรูปภาพพื้นหลังเต็มหน้าจอ (Full-screen Background) ใช้ Position Absolute จัดตำแหน่ง Form ด้านขวา ตัวอย่างโค้ด <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> body, html {  

สร้าง Hero Section (ส่วนบนสุดของเว็บ) พร้อมรูปพื้นหลัง Gradient Overlay, ข้อความตรงกลาง และ CTA Button ตัวอย่างโค้ด <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1" /> <style> body, html {   &nbs

สร้างพื้นหลังรูปภาพเบลอ (Blur) พร้อมข้อความทับบนหน้า ใช้ filter: blur(10px) บน Background Element ตัวอย่างโค้ด <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1" /> <style> body, html {    hei

สร้างเอฟเฟกต์ Parallax/Background Change เมื่อ Scroll โดยใช้หลาย Section ที่มี Background Image ต่างกัน คงที่ตำแหน่ง (background-attachment: fixed ไม่ได้ใช้ในตัวอย่าง แต่ใช้ height คงที่) ตัวอย่างโค้ด <!DOCTYPE html> <html> <head> <meta name="viewport" content="w

จัดรูปภาพให้เรียงติดกันแนวนอน (Side by Side) ใช้ Float Layout แบบคลาสสิก พร้อม Responsive Column ตัวอย่างโค้ด <!DOCTYPE html> <html> <head> <style> * {    box-sizing: border-box; } .imageColumn {    float: left;    width: 25%;    paddi

ใช้ border-radius สร้างรูปภาพมุมมน (Rounded) หรือวงกลม (Circular) ได้ตามต้องการ ตัวอย่างโค้ด <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> img {    border-radius: 50%;   &nb

สร้างรูปโปรไฟล์/อวตาร์เป็นวงกลมสมบูรณ์ ใช้ border-radius: 50% พร้อม Border และ Vertical Align ตัวอย่างโค้ด <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> .avatarImage {    vertica

ทำให้รูปภาพปรับขนาดอัตโนมัติตาม Container โดยไม่ล้นออกนอกหน้าจอ ใช้ max-width: 100% และ width: 100% ตัวอย่างโค้ด <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> img {    width: 100

เทคนิคคลาสสิกการจัดรูปภาพให้อยู่กึ่งกลางแนวนอน ใช้ display: block และ margin-left/right: auto ตัวอย่างโค้ด <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> img {    display: block;

สร้างรูปย่อ (Thumbnail) พร้อม Border, Border-radius และ Hover Box-shadow คลิกเพื่อดูรูปเต็มในแท็บใหม่ ตัวอย่างโค้ด <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1" /> <style> img {    border

สร้างเอฟเฟกต์ Overlay สไลด์ขึ้นจากด้านล่าง (Bottom Slide Up) ครอบคลุมรูปภาพเมื่อ Hover ใช้ 0 และ 100% ตัวอย่างโค้ด <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> .card-container {  

1) ครอบคลุมรูปภาพทั้งหมดเมื่อ Hover ใช้ Transform Scale ตัวอย่างโค้ด <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> .card-container {    position: relative;    width: 50

สร้าง Overlay แสดงหัวข้อ (Title) ขึ้นจากด้านล่างรูปภาพเมื่อ Hover ใช้ bottom: 0 และ height: auto ขยายจากล่างขึ้นบน ตัวอย่างโค้ด <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> * {box-sizing:

สร้างเอฟเฟกต์ Hover บนรูปภาพ: รูปจางลง และแสดงไอคอนใหญ่ตรงกลาง (เช่น ไอคอนเท้าสุนัข) ใช้ Font Awesome และ Transition ตัวอย่างโค้ด <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="https: