Introduction:
In today’s tutorial, we’ll dive into the world of web development to create interactive image tiles that expand when you hover over them (or touch them, for touch-enabled devices). We’ll be using HTML, CSS, and JavaScript to build this exciting project. By the end of this tutorial, you will have a better understanding of event handling, responsive design, and creating engaging user experiences on the web.
Things You Will Learn:
By following this tutorial, you will learn:
- How to detect the type of device (mouse or touch-enabled).
- Creating a responsive grid of image tiles.
- Applying CSS transitions for smooth animations.
- Handling mouseover and mouseout (or touchstart and touchend) events to expand and contract the image tiles.
Video Tutorial:
I would suggest you to watch the video down below for better understanding on we have implemented the functionlity of this project. If you find the video helpful give it a like and subscribe to my YouTube channel where I post new tips, tricks and tutorials related to HTML, CSS and Javascript.
Project Folder Structure:
Let us explore the project folder structure. The project folder consits of 3 files. The HTML file creates the elements required to build the structure and layout of our project. Next, the CSS file styles the elements that we have created with CSS. And Finally Javascript adds functionality to our project. The files used are:
- index.html
- style.css
- script.js
- images
HTML:
We begin with the HTML code. Copy the code below and paste it into your HTML document.
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Image Accordion</title>
<!-- Stylesheet -->
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="gallery-container">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
<!-- Script -->
<script src="script.js"></script>
</body>
</html>
Â
CSS:
Next, we style our code using CSS. For this copy, the code provided to you below and paste it into your stylesheet.
body {
margin: 0;
padding: 0;
}
.gallery-container {
position: absolute;
margin: auto;
top: 0;
bottom: 0;
display: flex;
flex-direction: row;
width: 100%;
height: 80vh;
}
.item {
height: 100%;
cursor: pointer;
}
Â
JS:
Finally, we add functionality using Javascript. For this once again copy the code below and paste it into your script file.
const items = document.querySelectorAll(".item");
let imageURLs = [
"dog-1.jpg",
"dog-2.jpg",
"dog-3.jpg",
"dog-4.jpg",
"dog-5.jpg",
];
//initially empty
let deviceType = "";
let events = {
mouse: {
start: "mouseover",
end: "mouseout",
},
touch: {
start: "touchstart",
end: "touchend",
},
};
const isTouchDevice = () => {
try {
document.createEvent("TouchEvent");
deviceType = "touch";
return true;
} catch (e) {
deviceType = "mouse";
return false;
}
};
isTouchDevice();
items.forEach((item, index) => {
let img = document.createElement("img");
img.setAttribute("src", imageURLs[index]);
img.style.width = "100%";
img.style.height = "100%";
img.style.objectFit = "cover";
item.appendChild(img);
//Initial CSS properties for all items
item.style.flex = "1";
item.style.transition = "flex 0.8s ease";
item.addEventListener(events[deviceType].start, () => {
item.style.flex = "9"; //Expand the item
});
item.addEventListener(events[deviceType].end, () => {
item.style.flex = "1"; //Contract the item
});
});
Â
Conclusion:
Congratulations! You’ve successfully created interactive image tiles using HTML, CSS, and JavaScript. You’ve learned how to detect the device type, build a responsive grid, and handle events for a dynamic user experience. Feel free to customize the project further by adding more images or adjusting the CSS styles to suit your preferences.
