Slide from side of hover.

_animations.scss

@keyframes in-top {
  0% {
    transform: translateY(-100%);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

%anim-in-top { animation-name: in-top;}
.anim-in-top { @extend %anim-in-top;}

@keyframes in-right {
  0% {
    transform: translateX(100%);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}

%anim-in-right { animation-name: in-right;}
.anim-in-right { @extend %anim-in-right;}

@keyframes in-left {
  0% {
    transform: translateX(-100%);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}

%anim-in-left { animation-name: in-left;}
.anim-in-left { @extend %anim-in-left;}

@keyframes in-bottom {
  0% {
    transform: translateY(100%);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

%anim-in-bottom { animation-name: in-bottom;}
.anim-in-bottom { @extend %anim-in-bottom;}

_styling.scss

.portfolio-item {
  @extend %ratio-object;

  &:before {
    padding-bottom: 100%;
  }
}
  .portfolio-item__inner {
    @extend %ratio-object__inner;
  }
  .portfolio-item__image {
    margin-bottom: 0px;
  }

  .portfolio-item__over {
    position: absolute;
    top: 0;
    left: 0;
    bottom: auto;
    right: auto;
    width: 100%;
    height: 100%;
    text-align: center;
    transform: translateX(100%);
    z-index: 5;

    animation-timing-function: ease-out;
    animation-duration: 250ms;
    animation-iteration-count: 1;
    animation-direction: normal;
    animation-fill-mode: forwards;

    .portfolio-item-hold & {
      transform: translate(0%, 0%);
    }
    .portfolio-item-in-left & {
      @extend %anim-in-left;
    }
    .portfolio-item-in-top & {
      @extend %anim-in-top;
    }
    .portfolio-item-in-right & {
      @extend %anim-in-right;
    }
    .portfolio-item-in-bottom & {
      @extend %anim-in-bottom;
    }
    .portfolio-item-out-left & {
      @extend %anim-in-right;
      animation-direction: reverse;
      animation-fill-mode: backwards;
    }
    .portfolio-item-out-top & {
      @extend %anim-in-bottom;
      animation-direction: reverse;
      animation-fill-mode: backwards;
    }
    .portfolio-item-out-right & {
      @extend %anim-in-left;
      animation-direction: reverse;
      animation-fill-mode: backwards;
    }
    .portfolio-item-out-bottom & {
      @extend %anim-in-top;
      animation-direction: reverse;
      animation-fill-mode: backwards;
    }
  }

  .portfolio-item__center {
    position: absolute;
    top: 50%;
    left: 50%;
    bottom: auto;
    right: auto;
    width: 100%;
    transform: translate(-50%, -50%);
    @include px-and-rem(padding, 2);
  }

  .portfolio-item__title {
    font-family: $font-header-stack;
    text-align: center;
    text-transform: lowercase;
    color: $clr-base;
    vertical-align: middle;
    line-height: .8;

    @extend %fs--kilo;
    @extend %push--large--bottom;
  }

  .portfolio-item__short {
    color: $clr-base;
    text-align: center;
    margin-bottom: 0px;
    @extend %push--large--bottom;
  }

slide-hover.directive.ts

import { Directive, OnInit, ElementRef, HostListener } from '@angular/core'
import { WindowService } from 'path/to/services/window.service' // from https://gist.github.com/dewwwald/ab845be6027d64a9b5e00c22a6511950

@Directive({
  selector: '[slideHover]',
  providers: [
    WindowService
  ]
})
export class SlideHoverDirective
{
  private el;
  private window;
  private top;
  private right;
  private bottom;
  private left;
  private delay;

  @HostListener('mouseenter', ['$event'])
  onMouseEnter (event)
  {
    this.top = this.el.offsetTop - this.window.scrollY;
    this.right = this.el.offsetLeft + this.el.offsetWidth;
    this.bottom = this.el.offsetTop - this.window.scrollY + this.el.offsetHeight;
    this.left = this.el.offsetLeft;
    var leftDiff = event.clientX - this.left;
    var rightDiff = this.right - event.clientX;
    var topDiff = event.clientY - this.top;
    var bottomDiff = this.bottom - event.clientY;

    var closerToBottom = bottomDiff < leftDiff && bottomDiff < rightDiff && bottomDiff < topDiff;
    var closerToRight = rightDiff < leftDiff && rightDiff < bottomDiff && rightDiff < topDiff;
    var closerToLeft =  leftDiff < bottomDiff && leftDiff < rightDiff && leftDiff < topDiff;

    // Test the side of triangle and act accodingly
    if (closerToBottom)
    {
      this.el.className += ' portfolio-item-in-bottom';
    }
    else if (closerToRight)
    {
      this.el.className += ' portfolio-item-in-right';
    }
    else if (closerToLeft)
    {
      this.el.className += ' portfolio-item-in-left';
    }
    else // implied -> (closerToTop)
    {
      this.el.className += ' portfolio-item-in-top';
    }
  }

  @HostListener('mouseleave', ['$event'])
  onMouseLeave (event)
  {
    var regexClass = new RegExp('portfolio-item-in-[a-z]*');
    this.el.className = 'portfolio-item-hold ' + this.el.className.replace(regexClass, '').trim();

    this.top = this.el.offsetTop - this.window.scrollY;
    this.right = this.el.offsetLeft + this.el.offsetWidth;
    this.bottom = this.el.offsetTop - this.window.scrollY + this.el.offsetHeight;
    this.left = this.el.offsetLeft;

    var leftDiff = this.left - event.clientX;
    var rightDiff = event.clientX - this.right;
    var topDiff = this.top - event.clientY;
    var bottomDiff = event.clientY - this.bottom;

    var closerToBottom = bottomDiff < leftDiff && bottomDiff < rightDiff && bottomDiff < topDiff;
    var closerToRight = rightDiff < leftDiff && rightDiff < bottomDiff && rightDiff < topDiff;
    var closerToLeft =  leftDiff < bottomDiff && leftDiff < rightDiff && leftDiff < topDiff;

    // Test the side of triangle and act accodingly
    if (closerToBottom)
    {
      this.el.className = this.el.className.replace('portfolio-item-hold', '') + ' portfolio-item-out-bottom';
    }
    else if (closerToRight)
    {
      this.el.className = this.el.className.replace('portfolio-item-hold', '') + ' portfolio-item-out-right';
    }
    else if (closerToLeft)
    {
      this.el.className = this.el.className.replace('portfolio-item-hold', '') + ' portfolio-item-out-left';
    }
    else // implied -> (closerToTop)
    {
      this.el.className = this.el.className.replace('portfolio-item-hold', '') + ' portfolio-item-out-top';
    }
    var regexOutClass = new RegExp('portfolio-item-out-[a-z]*');
    var _this = this;
    setTimeout(function () {
      _this.el.className = _this.el.className.replace(regexOutClass, '').trim();
    }, this.delay)
  }


  constructor (el: ElementRef, window: WindowService)
  {
    this.window = window.nativeWindow
    this.el = el.nativeElement
    this.delay = 250;
  }
}