Cách tạo thư viện hình ảnh với CSS

Tạo thư viện hình ảnh với CSS khá dễ dàng. Bạn có thể chạy mã sau để đạt được điều này. Một thư viện 3 hình ảnh được tạo ở đây:

Ví dụ

<!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="mydiv">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="mydiv">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="mydiv">CSS Tutorial</div>
    </div>
  </body>
</html>