HTML, CSS, and jQuery: Build a beautiful image display grid-JS Tutorial-php.cn

HTML, CSS, and jQuery: Build a beautiful image display grid

PHPz

Release： 2023-10-27 16:21:42

Original

822 people have browsed it

HTML, CSS, and jQuery: Build a beautiful image display grid

HTML, CSS and jQuery: Build a beautiful image display grid

In today's highly graphical era of the Internet, displaying images has become an indispensable part of website design. missing part. In order to improve user experience and attract users' attention, it is crucial to build a beautiful image display grid. In this article, we will use HTML, CSS, and jQuery to implement a simple but attractive image display grid.

First, we need to create a basic HTML structure. Here is a simple HTML template that includes a grid container with an image:

<!DOCTYPE html>
<html>
  <head>
    <title>图片展示网格</title>
    <link rel="stylesheet" type="text/css" href="style.css">
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="script.js"></script>
  </head>
  <body>
    <div class="grid-container">
      <div class="grid-item">
        <img src="image1.jpg" alt="图片1">
      </div>
      <div class="grid-item">
        <img src="image2.jpg" alt="图片2">
      </div>
      <div class="grid-item">
        <img src="image3.jpg" alt="图片3">
      </div>
      <!-- 添加更多图片 -->
    </div>
  </body>
</html>

Copy after login

Next, we will use CSS to style the grid container and images. The following is a simple CSS example that you can modify according to your needs:

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 20px;
}

.grid-item {
  position: relative;
}

.grid-item img {
  width: 100%;
  display: block;
  border-radius: 5px;
}

.grid-item .overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.grid-item:hover .overlay {
  opacity: 1;
}

.grid-item .overlay-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  color: #fff;
}

.grid-item .overlay-content h3 {
  margin: 0;
  font-size: 24px;
}

.grid-item .overlay-content p {
  margin: 10px 0;
  font-size: 14px;
}

Copy after login

In the above CSS, we used CSS Grid layout to create a responsive grid container. We also added rounded corners and a translucent mask to each image to provide a better visual effect.

Now, we will use jQuery to achieve dynamic effects on mouse hover. Here is a simple jQuery example where the mask will fade in and out when the mouse is hovered over the image:

$(document).ready(function() {
  $(".grid-item").hover(
    function() {
      $(this).find(".overlay").stop().animate({ opacity: 1 }, 300);
    },
    function() {
      $(this).find(".overlay").stop().animate({ opacity: 0 }, 300);
    }
  );
});

Copy after login

In the above jQuery code, we used .hover() Method to capture the mouseover event and use the .stop() method to stop the previous animation. Then, we use the .animate() method to adjust the transparency of the mask to achieve the fade effect.

To sum up, by using HTML, CSS and jQuery, we can easily build a beautiful image display grid. You can extend and customize it to your needs and add more images and interactive effects. Such a grid can be used to showcase products, photography, artwork, and more, adding visual appeal and user engagement to your website.

The above is the detailed content of HTML, CSS, and jQuery: Build a beautiful image display grid. For more information, please follow other related articles on the PHP Chinese website!