<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="row"> <div class="banner__image-container"> <img src="https://i.ibb.co/g7jCjX5/fuel-oil-system-design.png" alt="Fuel System Diagram" id="fuel-system-image"> <!-- Fill Box Overlay --> <a href="fill-box.html" class="overlay" style="top: 3%; left: 0%; width: 10.2%; height: 18%;" title="Fill Box"></a> <a href="fill-box.html" class="overlay" style="top: 25%; left: 1%; width: 8%; height: 4%;" title="Fill Box label"></a> <!-- Filtration Overlay --> <a href="filtration.html" class="overlay" style="top: 0%; left: 28%; width: 11%; height: 21%;" title="Filtration"></a> <a href="filtration.html" class="overlay" style="top: 26%; left: 29%; width: 8%; height: 4%;" title="Filtration label"></a> <!-- Main Tank Overlay --> <a href="main-tank.html" class="overlay" style="top: 42%; left: 23%; width: 29%; height: 50%;" title="Main Tank"></a> <a href="main-tank.html" class="overlay" style="top: 96%; left: 30%; width: 15%; height:4%;" title="Main Tank label"></a> <!-- Pump Set Overlay --> <a href="pump-set.html" class="overlay" style="top: 80%; left: 62%; width: 13%; height: 12%;" title="Pump Set"></a> <a href="pump-set.html" class="overlay" style="top: 96%; left: 64%; width: 9%; height: 4%;" title="Pump Set label"></a> <!-- Day Tank Overlay --> <a href="day-tank.html" class="overlay" style="top: 3%; left: 84.2%; width: 16%; height: 27%;" title="Day Tank"></a> <a href="day-tank.html" class="overlay" style="top: 34%; left: 85%; width: 14%; height: 5%;" title="Day Tank label"></a> </div> </div> </div>

.banner__image-container { position: relative; max-width: 100%; } #fuel-system-image { width: 100%; height: auto; display: block; } /* Style for each overlayed area */ .overlay { position: absolute; border: 2px solid rgba(255, 0, 0, 0.5); /* Red semi-transparent border */ background-color: rgba(255, 0, 0, 0.2); /* Optional background to highlight */ cursor: pointer; transition: background-color 0.3s ease; } .overlay:hover { background-color: rgba(255, 0, 0, 0.4); /* Darker on hover */ }