17
Image Slider
Discover how to create a modern tech slider using HTML and CSS with smooth animations. This step by step tutorial includes full source code to help you build a visually stunning and responsive slider that highlights key tech topics and enhances your websites user experience.
Introduction
Welcome to this tutorial on building a professional and modern Tech Slider using HTML and CSS. This project will guide you through creating a clean, eye catching and fully responsive slider.
In this tutorial we will cover key features such as a smooth sliding animation, hover-activated content overlays, elegant typography and interactive indicators. The layout uses Flexbox, modern design principles and subtle transitions to enhance the user experience.
This project is perfect for both beginners and experienced developers who want to add a visually engaging and functional slider to any kind of tech or educational web project.
Basic Knowledge Requirements
- HTML – To structure the slider and its content.
- CSS – To style the layout, add animations, and make it responsive
Tools & Setup
- A code editor like VS Code, Sublime Text,Atom or others.
- A modern browser for preview the code like Chrome, Edge, Firefox and Etc.
Project Setup
Create new folder by press Ctrl+Shift+N or press right click into screen then click “New” and choose Folder.
rename with name (About Us).
Open with Visual Studio and create inside the folder three files:
1. Index.html
2. style.css
Let’s Start Coding
HTML Code
Open the Index.html file and paste the code shown below.
<!DOCTYPE html>
<html lang="en">
<!-- created by CodeWeave24 -->
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>CodeWeave24 - Tech Slider</title>
<link
rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&family=Fira+Code:wght@400;500&display=swap"
/>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="slider-container">
<div class="slider-track">
<div class="slide">
<img
src="https://images.pexels.com/photos/577585/pexels-photo-577585.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940"
alt="Code on computer screen"
class="slide-img"
/>
<div class="slide-content">
<h2 class="slide-title">
<span class="highlight">Web Development</span> Mastery
</h2>
<p class="slide-desc">
Master modern frameworks and build responsive, accessible web
applications with our comprehensive courses.
</p>
<a href="#" class="slide-btn">Explore Courses</a>
</div>
</div>
<div class="slide">
<img
src="https://images.pexels.com/photos/8386440/pexels-photo-8386440.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940"
alt="AI and neural networks"
class="slide-img"
/>
<div class="slide-content">
<h2 class="slide-title">
AI & Machine <span class="highlight">Learning</span>
</h2>
<p class="slide-desc">
From fundamentals to advanced neural networks, unlock the power of
artificial intelligence.
</p>
<a href="#" class="slide-btn">Start Learning</a>
</div>
</div>
<div class="slide">
<img
src="https://images.pexels.com/photos/590016/pexels-photo-590016.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940"
alt="Data visualization"
class="slide-img"
/>
<div class="slide-content">
<h2 class="slide-title">
Data <span class="highlight">Science</span> Simplified
</h2>
<p class="slide-desc">
Transform raw data into actionable insights with Python, R, and
powerful visualization tools.
</p>
<a href="#" class="slide-btn">View Programs</a>
</div>
</div>
<div class="slide">
<img
src="https://images.pexels.com/photos/3861969/pexels-photo-3861969.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940"
alt="Futuristic technology interface"
class="slide-img"
/>
<div class="slide-content">
<h2 class="slide-title">
Cloud <span class="highlight">Computing</span>
</h2>
<p class="slide-desc">
Deploy, scale, and manage applications with AWS, Azure, and Google
Cloud platforms.
</p>
<a href="#" class="slide-btn">Get Certified</a>
</div>
</div>
</div>
<div class="slider-nav">
<div class="slider-indicator"></div>
<div class="slider-indicator"></div>
<div class="slider-indicator"></div>
<div class="slider-indicator"></div>
</div>
</div>
</body>
</html>
Explanation
- !DOCTYPE html:Tells the browser this is an HTML5 document.
- html lang=”en”:Tells the language used is English.
- head:This part contains setup and background info for the page:
- meta:Makes the site mobile-friendly and handles character encoding.
- title:Sets the page title (shown in the browser tab).
- link: Loads Google Fonts: “Inter” and “Fira Code” for nice-looking text.
- Links to a CSS file called style.css, which controls how things look.
- body:This is where everything you see on the webpage lives.
- div class=”slider-container”:This is the main box that holds the entire slider.
- div class=”slider-track”:This holds all the individual slides and makes them move horizontally.
CSS Code
We have finished the html part, now let’s start the styling part. Open style.css file and paste the code shown bellow.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Inter', sans-serif;
background: #0f172a;
color: #f8fafc;
overflow-x: hidden;
}
.slider-container {
position: relative;
width: 100%;
max-width: 1200px;
height: 65vh;
margin: 5vh auto;
overflow: hidden;
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
border-radius: 12px;
}
.slider-track {
display: flex;
width: 400%;
height: 100%;
animation: slide 24s infinite;
animation-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1);
}
@keyframes slide {
0% {
transform: translateX(0%);
}
20% {
transform: translateX(0%);
}
25% {
transform: translateX(-25%);
}
45% {
transform: translateX(-25%);
}
50% {
transform: translateX(-50%);
}
70% {
transform: translateX(-50%);
}
75% {
transform: translateX(-75%);
}
95% {
transform: translateX(-75%);
}
100% {
transform: translateX(0%);
}
}
.slide {
position: relative;
width: 25%;
height: 100%;
}
.slide-img {
width: 100%;
height: 100%;
object-fit: cover;
filter: brightness(0.7);
transition: filter 0.5s ease;
}
.slide:hover .slide-img {
filter: brightness(0.5);
}
.slide-content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 90%;
max-width: 800px;
padding: 2.5rem;
text-align: center;
background: rgba(15, 23, 42, 0.85);
border-radius: 8px;
backdrop-filter: blur(8px);
opacity: 0;
transition: all 0.6s cubic-bezier(0.215, 0.61, 0.355, 1) 0.3s;
}
.slide:hover .slide-content {
opacity: 1;
}
.slide-title {
font-size: clamp(1.8rem, 4vw, 3rem);
font-weight: 700;
margin-bottom: 1rem;
color: #f8fafc;
line-height: 1.2;
}
.highlight {
color: #7c3aed;
}
.slide-desc {
font-family: 'Fira Code', monospace;
font-size: clamp(1rem, 1.8vw, 1.2rem);
font-weight: 400;
color: #cbd5e1;
line-height: 1.6;
margin-bottom: 2rem;
}
.slide-btn {
display: inline-block;
padding: 0.9rem 2rem;
background: #7c3aed;
color: white;
border: none;
font-family: 'Inter', sans-serif;
font-size: 1rem;
font-weight: 500;
text-decoration: none;
border-radius: 6px;
transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.slide-btn:hover {
background: #6d28d9;
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(124, 58, 237, 0.3);
}
.slider-nav {
position: absolute;
bottom: 5%;
left: 50%;
transform: translateX(-50%);
display: flex;
gap: 1rem;
z-index: 10;
}
.slider-indicator {
width: 12px;
height: 12px;
border-radius: 50%;
background: rgba(203, 213, 225, 0.5);
transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
/* Smooth Indicator Animation */
.slider-indicator:nth-child(1) {
animation: pulse 24s infinite 0s;
}
.slider-indicator:nth-child(2) {
animation: pulse 24s infinite 6s;
}
.slider-indicator:nth-child(3) {
animation: pulse 24s infinite 12s;
}
.slider-indicator:nth-child(4) {
animation: pulse 24s infinite 18s;
}
@keyframes pulse {
0%,
16.66% {
background: #7c3aed;
transform: scale(1.2);
}
16.67%,
100% {
background: rgba(203, 213, 225, 0.5);
transform: scale(1);
}
}
.slider-container:hover .slider-track {
animation-play-state: paused;
}
@media (max-width: 1024px) {
.slider-container {
height: 60vh;
max-width: 900px;
}
.slide-content {
padding: 2rem;
}
}
@media (max-width: 768px) {
.slider-container {
height: 55vh;
margin: 3vh auto;
border-radius: 8px;
}
.slide-content {
padding: 1.5rem;
}
.slide-title {
margin-bottom: 0.8rem;
}
.slide-desc {
margin-bottom: 1.5rem;
}
}
@media (max-width: 480px) {
.slider-container {
height: 50vh;
border-radius: 0;
}
.slide-content {
padding: 1.2rem;
width: 95%;
}
.slide-btn {
padding: 0.8rem 1.5rem;
}
.slider-nav {
bottom: 3%;
}
}
Explanation
General Styles
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}- Removes default spacing on all elements.
- Makes width/padding easier to manage with box-sizing: border-box.
body { ... }- Sets the main font to ‘Inter’.
- I used a dark blue background (#0f172a) with light text (#f8fafc).
- Hides horizontal scroll with overflow-x: hidden.
Slider Layout
.slider-container- This is the outer box holding everything.
- It is centered, has a maximum width, rounded corners and a shadow.
- height: 65vh => takes 65% of the screen height.
.slider-track- Holds all the slides in one long row using display: flex.
- width: 400% → means 4 slides, each taking 25%.
- animation: slide 24s infinite → slides move automatically every 24 seconds.
- The animation uses a smooth easing curve for a soft slide effect.
Slide Animation
@keyframes slide { ... }- Defines how slides move left and right.
- It slides to each slide (0%, 25%, 50%, 75%) and then loops back.
.slide- Each individual slide is 25% wide and fills the height of the track.
Slide Images
.slide-img- Makes the image fill the entire slide.
- object-fit: cover ensures the image covers the box nicely.
- brightness(0.7) makes the image darker, so text stands out.
- On hover, the image gets a little darker: brightness(0.5).
Slide Content
.slide-content- This is the text box over the image.
- It is centered, has a transparent background, rounded corners and a blur effect.
- Starts hidden opacity: 0 and fades in when you hover over the slide.
.slide-title- Large bold heading with responsive font size (clamp()).
- Highlight color is applied using .highlight (#7c3aed, a purple tone).
.slide-desc- Descriptive paragraph using a code-like font (Fira Code).
- Lighter color for softer contrast.
- Uses clamp() again for font size that adapts to screen size.
.slide-btnA stylish button with:
- Purple background
- Rounded corners
- Padding for clickable space
- Hover effect: moves slightly up and adds a glow shadow
Navigation Dots
.slider-nav & .slider-indicator- Dots are centered below the slider.
- Each dot is a circle with a soft color.
- Animation makes them light up (pulse) when their slide is active.
@keyframes pulse- Each dot grows slightly and changes color while its slide is shown.
Pause on Hover
.slider-container:hover .slider-track- If you hover over the slider the animation pauses and you can read or click the content inside that image.
Responsive Design ( Fit All Screen)
@media (max-width: ...)- These are media queries to make the slider look good on smaller screens:
At 1024px:
- Shrinks the slider height and padding.
At 768px:
- Smaller padding and text spacing.
At 480px:
- Removes border radius and adjusts padding so it fits better on phones.
Output
Conclusion
This project is not just about sliding images it is about creating an engaging and responsive experience that feels modern and smooth. Every detail from the automatic transitions and hover effects to the animated indicator dots and adaptive layout also helps make this slider feel polished and professional.
The goal was to build a clean visually appealing slider that works great on all screen sizes. With features like dark mode styling, smooth slide animations and subtle hover interaction.
If you are learning web development this kind of project is a great way to practice. You will get hands on experience combining HTML and CSS to build something visually dynamic.Keep building and exploring every project takes your skills to the next level.
