32. Image Gallery Trong CSS

Image Gallery trong CSS:

Dưới đây là một ví dụ về cách tạo một image gallery đơn giản bằng HTML và CSS:

HTML:

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="styles.css">
  <title>Image Gallery Example</title>
</head>
<body>
  <div class="image-gallery">
    <div class="image">
      <img src="image1.jpg" alt="Image 1">
    </div>
    <div class="image">
      <img src="image2.jpg" alt="Image 2">
    </div>
    <div class="image">
      <img src="image3.jpg" alt="Image 3">
    </div>
    <div class="image">
      <img src="image4.jpg" alt="Image 4">
    </div>
  </div>
</body>
</html>

CSS (styles.css):

css

/* Định dạng container của image gallery */
.image-gallery {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  padding: 20px;
}

/* Định dạng từng ảnh trong gallery */
.image {
  position: relative;
  overflow: hidden;
}

/* Định dạng ảnh */
.image img {
  width: 100%;
  height: auto;
  transition: transform 0.3s ease-in-out;
}

/* Hiển thị hiệu ứng thu nhỏ khi hover vào ảnh */
.image:hover img {
  transform: scale(1.1);
}

Trong ví dụ này, chúng ta tạo một image gallery đơn giản:

.image-gallery là container của gallery sử dụng CSS Grid để xếp ảnh.
.image là mỗi ảnh trong gallery.
.image img định dạng ảnh trong gallery.
Khi hover vào ảnh, chúng ta áp dụng hiệu ứng thu nhỏ bằng cách sử dụng transform: scale(1.1);.

Lưu ý rằng ở ví dụ này, chúng ta sử dụng grid-template-columns để xếp ảnh thành 2 cột. Bạn có thể tùy chỉnh kiểu dáng và hiệu ứng của image gallery theo ý muốn của bạn.

Leave a Comment Cancel Reply