1

For the life of me I am trying to find a simple way to overlay a color over an image when it is missing an alt or the alt is empty. I have been able to get the code right for discovering if the alt is indeed missing. If I put something like width: 50px; I can get the image to change size, but I am looking for the color overlay. I am trying to create this as a CSS.

I have looked at other posts on here but they seem more about hovering and that is not what I am looking for.

img[alt=""] {width: 50px;}

Billy Woody
  • 23
  • 5
  • What kind of color overlay are you trying to achieve? – j08691 Dec 13 '19 at 20:47
  • 1
    You cannot overlay anything on an IMG because :after and :before pseudos are not available on that tag. Neither can you go for a parent selector. All you can do is eventually add a background-color. – Roko C. Buljan Dec 13 '19 at 20:48
  • To expand on what @RokoC.Buljan said, `` is a replaced element. You can't use things like pseudo elements with those. See [Does :before not work on img elements?](https://stackoverflow.com/q/5843035/691711). – zero298 Dec 13 '19 at 20:53
  • 2
    You can use one or more CSS `filter`s. E.g. `filter: contrast(175%) hue-rotate(90deg) sepia(100%) brightness(90%);` – j08691 Dec 13 '19 at 20:55
  • @j08691 I used your comment in part of my answer since it's probably the best way to be able to affect the image. If you'd like to make it an answer, let me know and I can remove it from my own answer. – zero298 Dec 13 '19 at 21:20
  • @zero298 Thanks for the heads up but feel free to use it as part of your answer – j08691 Dec 13 '19 at 21:24

2 Answers2

2

Try something like the following. Which combines my initial answer with PossessWithin's. You can leverage the usual semantic syntax of a <figure/> element along with the sibling and pseudo elements to create an overlay over the entire <figure/>.

Unfortunately, you have to have additional markup around the <img> to get it to work since the go to answer for something like this (using a pseudo :after element) won't work for <img>. See Does :before not work on img elements?

.container {
  position: relative;
}

img:not([alt])+.label::after {
  content: "missing alt";
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: rgba(255, 0, 0, 0.2);
}
<figure class="container">
  <img src="https://via.placeholder.com/150" width="150" height="150">
  <figcaption class="label">Placeholder 1</figcaption>
</figure>

<figure class="container">
  <img alt="Placeholder" src="https://via.placeholder.com/150" width="150" height="150">
  <figcaption class="label">Placeholder 2</figcaption>
</figure>

You could also try a filter as suggested by j08691.

You can use one or more CSS filters. E.g. filter: contrast(175%) hue-rotate(90deg) sepia(100%) brightness(90%);

img:not([alt]) {
  filter: opacity(25%);
}
<img src="https://via.placeholder.com/150" width="150" height="150">
<img alt="Placeholder" src="https://via.placeholder.com/150" width="150" height="150">
zero298
  • 25,467
  • 10
  • 75
  • 100
  • Thank you all so much for the quick response. I cannot express enough how appreciative I am. – Billy Woody Dec 13 '19 at 21:22
  • This is a very intelligent solution, but be aware that it will only work if there is no "alt" attribute. It's not recommended to leave an `` without an alt attribute, it is a bad HTML practice. – Diego Fortes Dec 13 '19 at 21:24
1

As far as I'm aware of, you'll need two things to achieve what you're looking for:

  1. A parent element for <img /> so we can add an overlay using :after. For this example I will use the figure element.
  2. A little bit of Javascript to locate all the empty alts & add a class to its parent with the overlay you want.

Here is an example:

HTML

<figure class="custom-figure">
    <img src="https://via.placeholder.com/200x200" alt="">
</figure>

<figure class="custom-figure">
    <img src="https://via.placeholder.com/200x200" alt="123">
</figure>

CSS

.custom-figure{
    display: inline-block;
    margin: 10px;
}

.custom-figure--overlay{
    position: relative;
}
.custom-figure--overlay:after{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: linear-gradient(120deg, #eaee44, #33d0ff);
    opacity: .7;
}

JS

const addOverlayToEmptyAlt = () => {
    const images = document.querySelectorAll(".custom-figure > img");

    for (let each of images) {
        const alt = each.getAttribute("alt").trim();

        if (alt === "") {
            each.closest(".custom-figure").classList.add("custom-figure--overlay");
        }
    }
};

addOverlayToEmptyAlt();

Live example on Codepen

Diego Fortes
  • 8,830
  • 3
  • 32
  • 42