สร้างแกลเลอรี่รูปภาพด้วย CSS

การสร้างแกลเลอรี่รูปภาพด้วย CSS ทำได้ง่ายมาก โดยใช้ float และการจัด layout แบบง่ายๆ

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

<!DOCTYPE html>
<html>
<head>
  <style>
    div.myGallery {
      margin: 3px;
      border: 2px solid orange;
      float: left;
      width: 220px;
    }
    div.myGallery:hover {
      border: 1px solid blue;
    }
    div.myGallery img {
      width: 100%;
      height: auto;
    }
    div.desc {
      padding: 20px;
      text-align: center;
    }
  </style>
</head>
<body>
  <div class="myGallery">
    <a target="_blank" href="https://www.tutorialspoint.com/assets/videotutorials/courses/3d_animation_online_training/380_course_211_image.jpg">
      <img src="https://www.tutorialspoint.com/assets/videotutorials/courses/3d_animation_online_training/380_course_211_image.jpg" alt="3D Animation Tutorial" width="600" height="500">
    </a>
    <div class="desc">3D Animation Tutorial</div>
  </div>
  <div class="myGallery">
    <a target="_blank" href="https://www.tutorialspoint.com/assets/videotutorials/courses/swift_4_online_training/380_course_210_image.jpg">
      <img src="https://www.tutorialspoint.com/assets/videotutorials/courses/swift_4_online_training/380_course_210_image.jpg" alt="Swift Video Tutorial" width="600" height="500">
    </a>
    <div class="desc">Swift Video Tutorial</div>
  </div>
  <div class="myGallery">
    <a target="_blank" href="https://www.tutorialspoint.com/assets/videotutorials/courses/css_online_training/380_course_215_image.jpg">
      <img src="https://www.tutorialspoint.com/assets/videotutorials/courses/css_online_training/380_course_215_image.jpg" alt="CSS Video Tutorial" width="600" height="500">
    </a>
    <div class="desc">CSS Tutorial</div>
  </div>
</body>
</html>

คำอธิบาย: ใช้ float: left จัดเรียงรูปติดกัน width: 220px ความกว้างคงที่ img width: 100% ทำให้รูปย่อ/ขยายตาม container :hover เปลี่ยนสีขอบเมื่อวางเมาส์ หมายเหตุ: แกลเลอรี่นี้ไม่ใช่ Responsive (ดู ID 1004062709 สำหรับเวอร์ชัน Responsive)