How to overlay an icon image on multiple images?

Question

I need to add an expand icon on top of a number of existing images. The image is displayed as a thumbnail and expands when clicked. The expand icon is to indicate that the images are clickable. I have the following implementation, but it's not ideal. It would be great if I didn't have to add the <img src="expand-icon.png" class="img-expand" /> on each and every image. I tried adding the icon using the ::after property, but the icon was not clickable and the position ended below the image not on top.

HTML

    <div class="thumbnail-container">
    <img src="my-image-that-will-expand-when-clicked.png" class="thumbnail" />
    <img src="expand-icon.png" class="img-expand" />
    </div>

CSS

    .thumbnail {
        thumbnail-max-height: auto;
        thumbnail-max-width: 500px;
        thumbnail: popup;
        padding: 10px;
        position: relative;
        top: 0;
        left: 0;
    }
    .thumbnail-container {
        display: table-cell;
        border: 1px solid #858383;
        border-radius: 9px;
        position: relative;
    }
    .img-expand {
        position: absolute;
        bottom: 5px;
        right: 5px;
        max-width: 20px;
        pointer-events: none
    }

And, there is a JS script that runs in the background. I don't have access to that script, the tool runs it in the background.

In my opinion it makes perfect sense for each image to have it's own expand button. Is there a reason you need to avoid it? — anpel, Dec 08 '20 at 16:52
*"I tried adding the icon using the ::after property"* This should work. If you show us that it would be helpful. Sounds like you did not position the pseudo element properly. — Paulie_D, Dec 08 '20 at 16:52
@anpel we have 100s of images, so it's not ideal to copy/paste the code all over, and would be a nuisance if we need to update it at some point. — user12011325, Dec 09 '20 at 17:24
@Paulie_D I got rid of all the pseudo-codes, but I will try to recreate it and update my post. — user12011325, Dec 09 '20 at 17:24
@user12011325 the idea here is that you have some sort of array with images and some sort of templating engine and you maintain the code only once - no need to copy / paste the markup over and over. — anpel, Dec 09 '20 at 17:28

Lae · Answer 1 · 2020-12-08T17:27:18.733

It is possible to add the expand icon by using ::after like you said in your question. This sounds like a good approach. The reason it didn't work is either due to poor positioning or no content being displayed.
Remember to either set content: ""; or content: url(...); and then set pointer-events: all; in your pseudo-element.

Here is an example:

.thumbnail::after {
    content: url(expand-icon.png);
    pointer-events: all;
    /* set size and position however you like... */
}

However, with this approach your pseudo element is still not clickable, and you will have to manage click events for the entire image as there is no way to tell between the image and its child pseudo-element.
You could use empty span or div elements and position them as clickable areas, but at this point you've gone too far.

In the end, if you absolutely must make only the button clickable, there is no easy work-around using pseudo-elements and you will have to use your current setup with two images.

An elegant solution, would be to use the pseudo-element and make the entire image clickable. Or if you want a part of it clickable, you can maybe use a map, but I recommend against doing this.

How to overlay an icon image on multiple images?

1 Answers1