Enhance an image on click solely with css

When displaying images, you may want to enhance them when clicked on. If you want to get rid of any nasty bling-bling language, you might want to do it with css. Here is how.

Create images with a class to reference to:

<img class="imageToEnhance">

And your css class to it:

.imageToEnhance:active {
    height: 95vh;
    width: auto;
    max-width: 100%;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    margin: auto;
    text-align: center;
    box-shadow: rgba(0, 0, 0, 0.56) 0px 22px 70px 4px;
}

See the results here.

Previous Blog Entry

---

Last update: 2025-09-17