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%);
}
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.
Top comments (35)
@sasscrafter will doing this affect seo?
I don't think so, the HTML stays the same. You are just styling it :)
Hi, I don’t think so
You added two display properties in img style i am quite confused does that empty line you left mean anything or.....not, and plz tell something proper about why you added two display so i get it😐☺️
Hi, thanks for pointing. Just a typo. You can use either inline-block or block. 😊
Thanks man
😊
You cannot use peusedo elements with img tag
Yep, but you can use them on broken images. So if images is fine pseudo elements won’t show up and if img is broken then they will be applied.
I'm sure I'm not the only person to try pseudo-elements with images only to find they're not supported! I had no idea that changed for broken images.
Sadly, no support in Safari for this though 😞
😔
Wow I weren't know that, thank you
Glad to help)
I like this idea! Always been a fan of just-in-case styles 🙌
Yep, same here :)
Very clever !
Thanks
Very nice 👌
Thanks
Good to know!
Yep
Great!
Thanks
Brilliant, thanks for sharing :)
No problem
Never though of that before! I have to try this out!!!
Definitely give it a try)
Wow, this is such a great idea!
;)
Nice, what I needed for my next project. THANKS
No problems mate 👌
Thanks)
Thanks