OwlCyberSecurity - MANAGER
Edit File: navigationfromchatgpt.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Nested Dropdown Menu with Logo</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"> <style> .card { position: relative; display: inline-block; width: 200px; height: 250px; /* Increased height to accommodate logo */ margin: 10px; border: 1px solid #ccc; } .content { padding: 20px; } .overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; background-color: rgba(255, 255, 255, 0.9); transition: opacity 0.3s ease; } .overlay-content { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; } .card:hover .overlay { opacity: 1; } .logo { width: 50px; height: 50px; margin-bottom: 20px; } </style> </head> <body> <div class="container"> <div class="card col-md-4"> <div class="content"> <h2>Insurance</h2> <p>This is some content for Card 1.</p> </div> <div class="overlay"> <div class="overlay-content"> <img src="your-logo1-overlay.png" alt="Overlay Logo 1" class="logo"> <h2>Additional Text for Card 1</h2> <p>This is additional content that appears when hovering over Card 1.</p> </div> </div> </div> <div class="card col-md-4"> <div class="content"> <h2>Card 2</h2> <p>This is some content for Card 2.</p> </div> <div class="overlay"> <div class="overlay-content"> <img src="your-logo2-overlay.png" alt="Overlay Logo 2" class="logo"> <h2>Additional Text for Card 2</h2> <p>This is additional content that appears when hovering over Card 2.</p> </div> </div> </div> <div class="card col-md-4"> <div class="content"> <h2>Card 3</h2> <p>This is some content for Card 3.</p> </div> <div class="overlay"> <div class="overlay-content"> <img src="your-logo3-overlay.png" alt="Overlay Logo 3" class="logo"> <h2>Additional Text for Card 3</h2> <p>This is additional content that appears when hovering over Card 3.</p> </div> </div> </div> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script> </body> </html>