DEV Community

artydev
artydev

Posted on

You absolutely don't need Javascript for a simple lightbox, thanks to 'target' css pseudo class

CSS is a very astonishing language. I always discover something new.
More than often, we rely on external libraries to display images.

Look at this, a lightbox in pure CSS, awesome.

body {
  margin:0;
  padding:0;
  text-align:center;
  background:beige;
}

.lightbox {
  display: none;
}

.lightbox:target {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background:black;
}

.lightbox img  {
   border: 2px solid white;
   width: 100%;
   height:100%;
}
Enter fullscreen mode Exit fullscreen mode

You can see a demo here LightBox

Top comments (0)