How to style broken images with css

#css #html #webdev

Broken images are ugly, but we can style them to provide a better user experience.
Here's what we'll be creating today:

But before we begin let's take a closer look at how images behave.

1. We can apply typography styles to images.

They will be applied to the alternative elements.

2. You can use pseudo-elements on broken images.

Typically ::before and ::after elements won't work on images, however, when image is not loaded this elements can appear.

Let's get to the interesting part.

Create an image tag and set a broken url and an alt attribute.



<img src="https://imag.unsplash.com/photo-1509021436665-8f07dbf5bf1d?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxleHBsb3JlLWZlZWR8M3x8fGVufDB8fHw%3D&w=1000&q=80" alt="Good book">

This is what we get in the browser:

Apply styles for the image element itself.



img {
     display: inline-block;
     font-family: Arial, sans-serif;
     font-weight: 300;
     line-height: 2;
     text-align: center;

     min-width: 300px;
     min-height: 50px;
     position: relative;
}

Add ::before element to create a background for the broken image



img::before {
     content: '';
     width: 100%;
     height: calc(100% + 10px);
     background-color: #ccc;
     border-radius: 10px;
     position: absolute;
     top: 50%;
     left: -2px;
     transform: translateY(-50%);
 }

Here's what browser renders

After this add ::after element to create text and icon.



img::after {
     content: "\2639" " " attr(alt);

     font-size: 18px;
     color: rgb(100, 100, 100);

     display: block;
     position: absolute;
     z-index: 2;
     top: 5px;
     left: 0;
     width: 100%;
     height: 100%;
}

Final output

Also in order to use html symbols inside a pseudo-element you have to first get the symbol number and then convert it to Hexdecimal value. Here's a nice tutorial on achieving this.