Image Gallery in CSS Language
In the realm of web development, aesthetics play a significant role in attracting and engaging users. An image gallery is a fantastic way to showcase a collection of images on your we
bsite. With the power of CSS (Cascading Style Sheets), you can design a beautiful and responsive image gallery that not only captures the attention of your visitors but also enhances the overall user experience.Let’s walk through the steps to create a simple image gallery using CSS:
HTML Structure:
<!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</title>
</head>
<body>
<div class="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>
<!-- Add more images here -->
</div>
</body>
</html>CSS Styling (styles.css):
/* Reset default margin and padding */
* {
margin: 0;
padding: 0;
}
body {
font-family: Arial, sans-serif;
background-color: #f1f1f1;
}
.gallery {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
max-width: 1200px;
margin: 0 auto;
padding: 20px;
}
.image {
width: calc(33.33% - 20px); /* Adjust as needed for your layout */
margin: 10px;
overflow: hidden;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
border-radius: 4px;
transition: transform 0.2s;
}
.image:hover {
transform: scale(1.05);
}
img {
width: 100%;
height: auto;
}In this example, we have a simple HTML structure that contains a gallery div, and within it, there are multiple image divs. You can add as many image divs as you need for your gallery. Each image div contains an img element for the image.
The CSS styles are used to format the gallery. It creates a responsive grid with a bit of space between the images, and a subtle hover effect for interactivity. You can adjust the width of the images by changing the width property within the .image class.
Remember to replace “image1.jpg,” “image2.jpg,” and so on with the actual file paths of your images.
Discover more from PiEmbSysTech
Subscribe to get the latest posts sent to your email.
