areddxx
9/26/2018 - 3:16 PM

Better Broken Images

Display something better for broken images. Blog post about this - https://bitsofco.de/styling-broken-images/

img {  
  min-height: 50px;

	&:before {  
	  content: " ";
	  display: block;
	  position: absolute;
	  top: -10px;
	  left: 0;
	  height: calc(100% + 10px);
	  width: 100%;
	  background-color: rgb(230, 230, 230);
	  border: 2px dotted rgb(200, 200, 200);
	  border-radius: 5px;
	}

	&:after {  
	  content: "Broken Image of " attr(alt);
	  display: block;
	  font-size: 16px;
	  font-style: normal;
	  color: rgb(100, 100, 100);
	  position: absolute;
	  top: 5px;
	  left: 0;
	  width: 100%;
	  text-align: center;
	}

}