On my React website, I am utilizing Tailwind CSS and I am attempting to showcase an image that has interactive elements. I want certain parts of the image to increase in size slightly when hovered over. My approach to achieving this was to save each part of the image individually while maintaining a consistent frame size, like this:
[![Part 1][1]][1] [![Part 2][2]][2] [![Part 3][3]][3] [![Part 4][4]][4] [![Part 5][5]][5]
When combined, these parts form the complete image that can be transformed individually:
[![Complete Image][6]][6]
I was successful in recreating the image using this method, but I am facing several issues:
- Regardless of which part of the image I hover over, the same part always increases in size, while the others remain static.
- The image overlaps with the footer.
Here is my current code:
import React from "react";
import One from "../assets/1.png";
import Two from "../assets/2.png";
import Three from "../assets/3.png";
import Four from "../assets/4.png";
import Five from "../assets/5.png";
export const Image = () => {
return (
<div className="relative">
<img
className="absolute hover:scale-105 duration-300"
src={Four}
alt="/"
/>
<img
className="absolute hover:scale-105 duration-300"
src={Five}
alt="/"
/>
<img
className="absolute hover:scale-105 duration-300"
src={Three}
alt="/"
/>
<img
className=" absolute hover:scale-105 duration-300"
src={One}
alt="/"
/>
<img
className="absolute hover:scale-105 duration-300"
src={Two}
alt="/"
/>
</div>
);
};
export default Image;
Footer:
const Footer = () => {
return (
<div className="max-w-[1240px] mx-auto py-16 px-4 grid lg:grid-cols-3 gap-8 text-gray-300">
[...]
</div>
);
};
export default Footer;
How can I resolve these issues? Additionally, is there a more efficient way to achieve the desired effect?