<div id="resize">
  <h4>Try resizing the images at the left from bottom right corner</h4>
  <div style="position:relative;">
    <div class="img"></div>
    <div class="img"></div>
    <div class="img"></div>
    <div class="img"></div>
  </div>
</div>


<div id="browser-support">
  <strong>Image credits:</strong> <a href="https://unsplash.com/negativespace">Luis Llerena</a>, via <a href="https://unsplash.com/">Unsplash</a>.
</div>

#resize{
  width: 500px; 
  position: relative;
}
#resize .img {  
  height: 200px;
  max-width: 500px; 
  position: absolute;
  background-image: url('https://unsplash.imgix.net/photo-1430760814266-9c81759e5e55?fit=crop&fm=jpg&q=75&w=950');
  background-size: 500px 200px;
}

#resize .img:first-child{
  width: 500px;
}

#resize .img:not(:first-child){
  resize: horizontal;
  overflow:hidden;
}

#resize .img:nth-child(2){
  width: 60px;
  min-width: 60px;
  filter:grayscale(100%);
  -webkit-filter:grayscale(100%);
}



#resize .img:nth-child(3){
  width: 40px;
  min-width: 40px;
  filter:hue-rotate(90deg);
  -webkit-filter:hue-rotate(90deg);
}



#resize .img:nth-child(4){
  width: 20px;
  min-width: 20px;
  filter:invert(70%);
  -webkit-filter:invert(70%);
}






#browser-support {
  position: relative;
  top: 210px;
  background: ivory;
  border-left: 6px skyblue solid;
  font-family: courier new;
  font-size: 14px;
  margin: 12px 0;
  padding: 6px;
}