How to Implement Image Hotspots using HTML & CSS – Solution: Image Hotspots using HTML & CSS with source code, demo, and also how you can execute full program easily. To complete the program you need to follow those steps given bellow
Live Demo
Also Helpful –
Image Hotspots using HTML & CSS
Description
Back to coding, To complete this program with debugging free code you have to create two files. The first file is to HTML and the second file gonna be CSS for the style part,
index.html
Create an HTML file named ‘index.html‘ and put those codes given below.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
<!-- Coding Debugging (https://codingdebugging.com) --> <!DOCTYPE html> <html> <head> <title>Image Hotspots - Coding Debugging</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- My Stylesheet --> <link rel="stylesheet" href="style.css"> </head> <body> <div class="container"> <img src="cd.jpg" alt="Combo of Watch, MacBook, Mouse & Vase"> <div class="hotspot watch" text="Watch" title="Watch"></div> <div class="hotspot macbook" text="MacBook" title="MacBook"></div> <div class="hotspot mouse" text="Mouse" title="Mouse"></div> <div class="hotspot vase" text="Vase" title="Vase"></div> </div> </body> </html> |
style.css
Create a CSS file named ‘style.css‘ and put those codes given below.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 |
.container{ width: 100%; position: relative; } .container img{ width: 100%; } .hotspot{ width: 20px; height: 20px; background-color: #9acd32; border-radius: 50%; position: absolute; animation: wave 1s infinite; cursor: pointer; } .watch{ left: 12%; bottom: 25%; } .macbook{ left: 45%; top: 70%; } .mouse{ right: 10%; bottom: 22%; } .vase{ right: 18%; bottom: 48%; } @keyframes wave{ from{ box-shadow: 0 0 0 0 #9acd32bb; } to{ box-shadow: 0 0 0 10px #9acd3210; } } .hotspot::before{ content: attr(text); width: max-content; position: absolute; background-color: #222222dd; color: #fff; left: 50%; transform: translateX(-50%); top: 30px; padding: 8px 20px; font-size: 14px; border-radius: 3px; display: none; } .hotspot::after{ content: ""; border-color: transparent transparent #222222dd; border-width: 0 8px 6px; border-style: solid; position: absolute; top: 24px; left: 50%; transform: translateX(-50%); display: none; } .hotspot:hover::before, .hotspot:hover::after{ display: block; } |
Thank you for visiting!
We appreciate you for your precious time. I hope you are learn something from here! If you have any queries about this coding comment down below we will reply ASAP.
Keep coding, Keep debugging!