Styled Broken Images

by rdillman

HTML

<p>
This is a broken image with default styles.
</p>
<img class="" src="foo.jpg" alt="Company Logo" height="100" width="100" />
<br />
<br />
<br />
<p>
This is a broken image with better styles.
</p>
<img class="broken" src="foo.jpg" alt="Company Logo" height="100" width="100" />
<p>
Same code with a working image
</p>
<img class="broken" src="https://static.highsnobiety.com/thumbor/Dlh0IXpfsroEYkPeg4h9FT0Sjyc=/1600x1067/static.highsnobiety.com/wp-content/uploads/2012/08/06171644/replacement-logos-01.jpg" alt="Company Logo" height="100" width="100" />

CSS

img {
  height: 54px;
  width: 155px;
  border-radius: 27px;
  border: 1px solid #D4D4D4;
}

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

/* Hides the background */
img.broken::before {
     content: '';
     position: absolute;
     top: -1px;
     left: -1px;
     right: -1px;
     bottom: -1px;
     background-color: #fff;
 }
 
 /* Creates the overlay */
 img.broken::after {
     content: attr(alt);
     font-size: 12px;
     display: block;
     position: absolute;
     z-index: 2;
     top: -1px;
     left: -1px;
     right: -1px;
     bottom: -1px;
     padding: 14px;
     color: #777777;
     background-color: #ffffff;
     border-radius: 18%/50%;
     border: 1px solid #D4D4D4;
}