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="/static/imghw/default1.png" data-src="image1.jpg" class="lazy" alt="图片1">
</div>
<div class="grid-item">
<img src="/static/imghw/default1.png" data-src="image2.jpg" class="lazy" alt="图片2">
</div>
<div class="grid-item">
<img src="/static/imghw/default1.png" data-src="image3.jpg" class="lazy" alt="图片3">
</div>
<!-- 添加更多图片 -->
</div>
</body>
</html>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;
}
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);
}
);
});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!
Hot AI Tools
Undress AI Tool
Undress images for free
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
How to create an image sprite with HTML and CSS
Aug 23, 2025 am 06:25 AM
AnimagespritecombinesmultipleimagesintoonefiletoreduceHTTPrequestsandimprovepageloadspeed.2.Prepareasinglespriteimagebyarrangingsmallergraphics(e.g.,50x50pxicons)inagrid(e.g.,100x100px).3.UseHTMLelementslikewithsharedanduniqueclasses(e.g.,class="
How to restrict file types for an upload input in HTML
Aug 24, 2025 am 02:57 AM
Use the accept attribute to limit the upload type of HTML file, such as accept="image/*" only allows images, accept=".pdf" only allows PDF, accept=".doc,.docx,.pdf,.txt" allows multiple specified types, and can combine JavaScript to verify file types to improve user experience, but security verification must be performed on the server side, because the accept attribute is not secure and the browser supports are different, and it is only used to improve availability rather than replace server verification.
How to disable a form element in HTML
Aug 30, 2025 am 08:45 AM
To disable HTML form elements, you can use the disabled attribute, which can prevent user interaction and the element value will not be submitted with the form. This attribute is of a Boolean type and can be directly added to form element tags such as input, textarea, select, or button. For example, it can also be dynamically controlled through JavaScript, such as document.getElementById("myInput").disabled=true. If the element cannot be edited but the value is still submitted, you should use the readonly attribute. The disabled attribute is simple and effective and widely supported.
What is ARIA in HTML for accessibility?
Aug 27, 2025 am 04:57 AM
ARIAisneededtoenhancewebaccessibilityfordynamiccontentandcustomUIcomponentsthatlacknativeHTMLsemantics.1)ARIArolesdefineanelement’spurpose(e.g.,role="dialog").2)ARIApropertiesdescribecharacteristics(e.g.,aria-label,aria-describedby).3)ARIAs
How to create a ripple effect on a button with CSS
Aug 23, 2025 am 07:51 AM
To create a button's ripple effect, you need to combine HTML, CSS animation and JavaScript; first build a button structure with span elements, set the button style with CSS and hide the overflow content, then create the initial hidden circular ripple element through absolute positioning and rounded corner styles, then define the CSS keyframe animation that expands and fades from the center point, and finally use JavaScript to dynamically add activation classes when clicking to trigger the animation, and calculate the click coordinates to make the ripple diffuse from the click position. The entire process ensures continuous triggering through re-arrangement, and finally achieves an ink ripple interaction effect similar to MaterialDesign.
How to implement a basic client-side image map in HTML
Aug 26, 2025 am 08:08 AM
To implement basic client image mapping, you need to follow the following steps: 1. Use a tag with the usemap attribute, whose value is "#map name", such as
How to use the source tag with video and audio in HTML
Aug 28, 2025 am 02:42 AM
Thetagisusedtospecifymultiplemediasourceswithinorelements,ensuringbroaderbrowsercompatibility.1.Itallowslistingdifferentfileformatssothebrowsercanplaythefirstsupportedone.2.Thetypeattributehelpsbrowsersdetectcompatibilitywithoutdownloadingthefile.3.F
How to align text vertically in CSS
Aug 28, 2025 am 08:10 AM
ThemostreliablewaytoverticallyaligntextinCSSisusingFlexboxwithalign-items:center,whichworksforbothsingleandmultiplelinesoftextwithinacontainerofdefinedheight;alternatively,CSSGridwithplace-items:centerofferssimilarbenefitsforgrid-basedlayouts,whileli
