Gallery Center

by joshmoto

HTML

<div class="gallery">
  
  <div class="thumb">
    <a href="#">
      <div class="translate">
        <img src="http://placehold.it/400x300/1b191e/" alt="" />
      </div>
    </a> 
  </div>

  <div class="thumb">
    <a href="#">
      <div class="translate">
        <img src="http://placehold.it/300x400/1b191e/" alt="" />
      </div>
    </a> 
  </div>

</div>

SCSS

.gallery {
  padding: 10px;
  overflow: hidden;
  
}

.thumb {
  margin: 10px;
  background: #aaa;
  width: 33%;
  float: left;
  position: relative;
  overflow: hidden;
  
  &:before {
    height: 0;
    width: 100%;
    padding: { top: 100%; }
    content: "";
    display: block;
    
  }
  
  > A {
    position: absolute;
    top: 0; left: 0; bottom: 0; right: 0;
    display: block;
    overflow: hidden;
    
    .translate {
      display: block;
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      transform: translate(50%,50%);
      
      IMG {
        width: auto;
        height: auto;
        max-height: 100%;
        max-width: 100%;
        transform: translate(-50%,-50%);
        display: block;
        
      }
      
    }
    
  }
  
}