I want to create an interactive image with CSS where every part of it will reveal a different icon when you hover on it.
I can't figure out how to make it responsive while:
- keeping all the parts sized and positioned correctly in relation to each other (so it will all fit together as one big image) and
- keeping the revealed icon at the center of the corresponding image part.
This is what I have at the moment:
.circle-container { position: relative; width: 90vw; height: 90vw; max-width: 500px; max-height: 500px; margin: auto; margin-top: 150px; margin-bottom: 150px; display: flex; justify-content: center; align-items: center;}.circle-part { position: absolute; overflow: hidden; transition: all 0.3s ease;}.circle-part img { width: 40%; object-fit: contain;}.icon { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); opacity: 0; transition: opacity 0.3s ease;}.circle-part:hover .icon { opacity: 1;}.circle-part.part1 { transform: translate(-70%, 35%);}.circle-part.part2 { transform: translate(-38%, -75%);}.circle-part.part3 { transform: translate(-5%, -70%);}.circle-part.part4 { transform: translate(40%, -260%);}.circle-part.part5 { transform: translate(45%, -35%);}.circle-part.part6 { transform: translate(45%, 75%);}.circle-part.part7 { transform: translate(2%, 95%);}.circle-part.part8 { transform: translate(-1%, 10%);}<!doctype html><html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Interactive Image</title><link rel="stylesheet" href="styles.css" /></head><body><div class="circle-container"><div class="circle-part part1"><img src="https://i.postimg.cc/43YQH7jK/default-1.png" alt="Part 1" /><img src="https://i.postimg.cc/xdSr9Y2b/hover-1.png" class="icon" alt="Icon 1" /></div><div class="circle-part part2"><img src="https://i.postimg.cc/7hk3RBh7/default-2.png" alt="Part 2" /><img src="https://i.postimg.cc/ZqPGRgbs/hover-2.png" class="icon" alt="Icon 2" /></div><div class="circle-part part3"><img src="https://i.postimg.cc/Y9gNbcrM/default-3.png" alt="Part 3" /><img src="https://i.postimg.cc/G2cZsQ9L/hover-3.png" class="icon" alt="Icon 3" /></div><div class="circle-part part4"><img src="https://i.postimg.cc/cJPMR1NF/default-4.png" alt="Part 4" /><img src="https://i.postimg.cc/nz0NKDQv/hover-4.png" class="icon" alt="Icon 4" /></div><div class="circle-part part5"><img src="https://i.postimg.cc/j24HYzn1/default-5.png" alt="Part 5" /><img src="https://i.postimg.cc/PJJ9S5m0/hover-5.png" class="icon" alt="Icon 5" /></div><div class="circle-part part6"><img src="https://i.postimg.cc/WpG6ZPY7/default-6.png" alt="Part 6" /><img src="https://i.postimg.cc/KjWVwhfj/hover-6.png" class="icon" alt="Icon 6" /></div><div class="circle-part part7"><img src="https://i.postimg.cc/7YX3BnkG/default-7.png" alt="Part 7" /><img src="https://i.postimg.cc/sfHtv5zz/hover-7.png" class="icon" alt="Icon 7" /></div><div class="circle-part part8"><img src="https://i.postimg.cc/yY7hXrwC/default-8.png" alt="Part 8" /><img src="https://i.postimg.cc/gkw1RrcZ/hover-8.png" class="icon" alt="Icon 8" /></div></div></body></html>I also read about image mapping, but I don't know if that would work for this or how to go about it.
