<html>
<head>
<style type="text/css">
.lightbox {display: none;}
.lightbox:target {position: absolute;left: 0; top: 0; width: 100%; height:
100%; display: flex; align-items: center; justify-content: center; }
.lightbox figcaption {width: 25rem; position: relative; padding: 1.5em;
background-color: lightblue;}
.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 .close::before { left: 0; top: 0; width: 100%; height: 100%;
position: fixed; background-color: rgba(0,0,0,.7); content: ""; cursor:
default;}
a {text-decoration: none;}
</style>
</head>
<body>
<ul>
<li><a href="#beispiel">Sie wollen mehr wissen?</a></li>
</ul>
<div class="lightbox" id="beispiel">
<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> |
