<base href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/">
<div>
  <img src="steampunk-gentleman.jpg" alt="Steampunk self-portrait photograph of Daniel Proulx in a steampunk gasmask">
  <img src="steampunk-gentleman.jpg" alt="Steampunk self-portrait photograph of Daniel Proulx in a steampunk gasmask" class="sepia"</div>

<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
	<filter id="sepiatone">
	<feColorMatrix values="0.14 0.45 0.05 0 0
						   0.12 0.39 0.04 0 0
						   0.08 0.28 0.03 0 0
						   0 0 0 1 0" />
	</filter>
</svg>
body {
  background: #433;
}
div { 
  display: inline-block;
  font-size: 0;
  margin: 0 20%
}
img { 
  width: 50%;
  display: inline-block;
  max-width: 500px;
  height: auto;
} 
img.sepia { 
  filter: url(#sepiatone); 
  -webkit-filter: sepia(1);
  -webkit-filter: sepia(100%); 
  filter: sepia(100%);
  background-color: #5E2612;
  filter: alpha(opacity = 50);
  zoom:1; 
}
@media all and (max-width: 1000px) {
  img { 
    display: block; 
    width: 100% }
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.