/*References: 
* https://stackoverflow.com/questions/45563335/how-to-create-a-full-width-table-with-fixed-height-and-scrolling-in-bootstrap/45563464 
* https://miketricking.github.io/bootstrap-image-hover/ 
* https://stackoverflow.com/questions/14977864/fixed-header-table-with-horizontal-scrollbar-and-vertical-scrollbar-on */

.overlaymask {
    width: 100%;
    height: 100%;
    float: left;
    overflow: hidden;
    position: relative;
    text-align: center;
    cursor: default;
  }
  
.overlaymask .overlay {
    width: 100%;
    height: 100%;
    position: absolute;
    overflow: hidden;
    left: 0;
    background-color: rgba(255, 255, 255, 0.7);
    top: -200px;
    opacity: 0;
    filter: alpha(opacity=0);
    -webkit-transition: all 0.1s ease-out 0.3s;
    transition: all 0.1s ease-out 0.3s;
  }
  
.overlaymask:hover .overlay {
    opacity: 1;
    filter: alpha(opacity=100);
    top: 0px;
    -webkit-transition-delay: 0s;
    transition-delay: 0s;
  }
  
.overlaymask img {
    display: block;
    position: relative;
  }

.overlaymask a.info {
    display: inline-block;
    text-decoration: none;
    padding: 7px 14px;
    text-transform: uppercase;
    margin: 50px 0 0 0;
    background-color: transparent;
    -webkit-transform: translateY(-200px);
    -ms-transform: translateY(-200px);
    transform: translateY(-200px);
    color: #000;
    border: 1px solid #000;
    -webkit-transition: all ease-in-out 0.3s;
    transition: all ease-in-out 0.3s;
  }
  
  .overlaymask a.info:hover {
    box-shadow: 0 0 5px #fff;
  }
  
  .overlaymask:hover a.info {
    -webkit-transform: translateY(0px);
    -ms-transform: translateY(0px);
    transform: translateY(0px);
    box-shadow: 0 0 5px #000;
    color: #000;
    border: 1px solid #000;
    -webkit-transition-delay: 0.3s;
    transition-delay: 0.3s;
  }