JSFiddle - React, Tailwind, and code Playground

Image Container Test

by Hugo Carneiro

HTML

<div class="container">
  <div class="col-xs-12 col-md-8 col-md-offset-2">
    <div class="image-container">
    <img class="placeholder-el" width="1024" height="680" src="http://i.imgur.com/mIbrOhH.gif">
      <!--<span><img src="http://pic.1fotonin.com//data/wallpapers/216/WDF_2533117.jpg"></span>-->
    </div>
  </div>
</div>

CSS

.image-container {
  position: relative;
  width: 100%;
  max-height: 400px;
  overflow: hidden;
  text-align: center;
}
.image-container:before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: red;
  -webkit-mask-image: url('http://cdn.appstorm.net/android.appstorm.net/authors/aghoshal/Picture-Box-icon1.png');
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center center;
  mask-image: url('http://cdn.appstorm.net/android.appstorm.net/authors/aghoshal/Picture-Box-icon1.png');
  mask-repeat: no-repeat;
  mask-position: center center;
}
.image-container span {
    position  : relative;
    width     : 100%;
    max-height: 400px;
    overflow  : hidden;
}
.image-container img {
    position  : relative;
    max-width : 100%;
    max-height: inherit;
}
.image-container .placeholder-el {
  background-color: rgba(0,0,0,0.8);
}