Clean • Professional
Modern websites use visuals to engage users, but too many images can slow down pages and hurt SEO. CSS provides smart solutions like Sprites, Image Galleries, and Sliders to display images efficiently. This guide explains each with HTML & CSS examples.
A CSS sprite is one big image that contains several smaller images like icons or buttons. You display only the part you need using background-position, which speeds up your website.
The background-position property shifts the visible part of the sprite to show the desired image.
<div class="sprite-icons">
<a href="#" class="icon facebook"></a>
<a href="#" class="icon twitter"></a>
<a href="#" class="icon instagram"></a>
</div>
.sprite-icons .icon {
display: inline-block;
width: 50px;
height: 50px;
background: url('social-sprite.png') no-repeat;
}
.icon.facebook { background-position: 0 0; }
.icon.twitter { background-position: -50px 0; }
.icon.instagram { background-position: -100px 0; }
An image gallery is a collection of images arranged in a grid or layout on a web page. Galleries are commonly used in portfolios, product showcases, and photography websites.
Creating a Simple Gallery with HTML & CSS
<div class="gallery">
<img src="img1.jpg" alt="Nature 1">
<img src="img2.jpg" alt="Nature 2">
<img src="img3.jpg" alt="Nature 3">
<img src="img4.jpg" alt="Nature 4">
</div>
.gallery {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 15px;
padding: 20px;
}
.gallery img {
width: 100%;
height: 200px;
object-fit: cover;
border-radius: 10px;
box-shadow: 0 4px 6px rgba(0,0,0,0.2);
transition: transform 0.3s;
}
.gallery img:hover {
transform: scale(1.05);
}
minmax() and auto-fit for fluid layouts.A slider (carousel) rotates multiple images or content blocks in the same space. It is commonly used for:
Sliders are a common way to display images or content in a limited space. They can be categorized into Image Sliders, Content Sliders, and Auto vs Manual Sliders.
An image slider rotates multiple images in the same area. It’s widely used for banners, portfolios, or product showcases. The main idea is to cycle through images smoothly.
<div class="image-slider">
<div class="slides">
<img src="slide1.jpg" alt="Slide 1">
<img src="slide2.jpg" alt="Slide 2">
<img src="slide3.jpg" alt="Slide 3">
</div>
</div>
.image-slider {
width: 100%;
max-width: 600px;
overflow: hidden;
margin: auto;
border-radius: 10px;
box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}
.slides {
display: flex;
width: 300%;
animation: slide 12s infinite;
}
.slides img {
width: 100%;
flex-shrink: 0;
}
@keyframes slide {
0% { transform: translateX(0); }
33% { transform: translateX(-100%); }
66% { transform: translateX(-200%); }
100% { transform: translateX(0); }
}
A content slider rotates text or HTML content instead of just images. It’s often used for testimonials, feature highlights, or news tickers.
<div class="content-slider">
<div class="content-slides">
<div class="slide">"Great service! Highly recommend." – John</div>
<div class="slide">"Amazing design and fast support." – Sarah</div>
<div class="slide">"Professional and user-friendly website." – Mike</div>
</div>
</div>
.content-slider {
width: 100%;
max-width: 500px;
overflow: hidden;
margin: auto;
border: 2px solid #ccc;
border-radius: 10px;
padding: 20px;
background: #f9f9f9;
}
.content-slides {
display: flex;
width: 300%;
animation: contentSlide 12s infinite;
}
.slide {
flex-shrink: 0;
width: 100%;
text-align: center;
font-size: 1.2rem;
color: #333;
}
@keyframes contentSlide {
0% { transform: translateX(0); }
33% { transform: translateX(-100%); }
66% { transform: translateX(-200%); }
100% { transform: translateX(0); }
}
@keyframes.Working Manual Slider Example
<div class="manual-slider">
<input type="radio" name="slide" id="slide1" checked>
<input type="radio" name="slide" id="slide2">
<input type="radio" name="slide" id="slide3">
<div class="slides">
<div class="slide s1">Slide 1</div>
<div class="slide s2">Slide 2</div>
<div class="slide s3">Slide 3</div>
</div>
<div class="navigation">
<label for="slide1" class="nav-btn"></label>
<label for="slide2" class="nav-btn"></label>
<label for="slide3" class="nav-btn"></label>
</div>
</div>
.manual-slider {
width: 500px;
margin: auto;
position: relative;
overflow: hidden;
border-radius: 10px;
border: 2px solid #ccc;
}
/* Hide all radio buttons */
.manual-slider input[type="radio"] {
display: none;
}
.slides {
display: flex;
width: 300%;
transition: transform 0.5s ease-in-out;
}
.slide {
flex-shrink: 0;
width: 100%;
height: 200px;
display: flex;
align-items: center;
justify-content: center;
background: lightblue;
font-size: 1.5rem;
}
/* Manual slide switching using :checked + sibling */
#slide1:checked ~ .slides { transform: translateX(0); }
#slide2:checked ~ .slides { transform: translateX(-100%); }
#slide3:checked ~ .slides { transform: translateX(-200%); }
/* Navigation buttons */
.navigation {
text-align: center;
margin-top: 10px;
}
.nav-btn {
width: 15px;
height: 15px;
border-radius: 50%;
background: #333;
display: inline-block;
margin: 0 5px;
cursor: pointer;
}