Source Code:
(back to article)
Submit
Result:
Report an issue
<!DOCTYPE html> <html> <head> <style> h1+a { background-color: #8ebf42; padding: 20px 40px; color: #ffffff; text-decoration: none; font-size: 20px; margin: 15px 0; display: inline-block; } /* Unopened lightbox */ .lightbox { display: none; } /* Opened lightbox */ .lightbox:target { position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; } /* Lightbox content */ .lightbox figcaption { width: 25rem; position: relative; padding: 1.5em; background-color: #8ebf42; } /* Close button */ .lightbox .close { position: relative; display: block; } .lightbox .close::after { right: -1rem; top: -1rem; width: 2rem; height: 2rem; position: absolute; display: flex; z-index: 1; align-items: center; justify-content: center; background-color: black; border-radius: 50%; color: white; content: "×"; cursor: pointer; } /* Lightbox overlay */ .lightbox .close::before { left: 0; top: 0; width: 100%; height: 100%; position: fixed; background-color: rgba(0, 0, 0, .7); content: ""; cursor: default; } </style> </head> <body> <h1>:target selector example</h1> <a href="#lightbox">Open Lightbox</a> <div class="lightbox" id="lightbox"> <figure> <a href="#" class="close"></a> <figcaption>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec felis enim, placerat id eleifend eu, semper vel sem. </figcaption> </figure> </div> </body> </html>