A Pen by Dylan Burkey.

index.html

<div class="le">
  
  <div class="content-item product-content">
 <h2 class="product-header">MIG Welders</h2>
    <img alt="" id="kids1" src="http://assets.lincolnelectric.com/assets/global/Products/K2471-2/300x300.jpg"> 

    <div class="overlay"></div>

    <div class="corner-overlay-content"><strong>Shop Now</strong></div>

    <div class="overlay-content">
        <h2 class="">MIG Welders</h2>
        <p>Lincoln Electric is your single source for stick, MIG, TIG and submerged arc welders, as well as plasma cutting systems. We also provide a range of guns and torches for all welding processes and applications.<span class="secondary-hero-text"> Lincoln also offers automation solutions for mechanized and robotic welding, orbital systems, training systems and weld fume control systems.</span></p>
<a class="button left" href="#button">button</a>
    </div>

</div>
				
	
</div>
</div>

style.scss

@import "compass/css3";
$leco-red: #be1e2d !default;

$font-family: 'Open Sans', Helvetica, Arial, sans-serif !default;

$font-weight: 400 !default;

$border-color: $leco-red;

$border-hover-color: #222;

$opacity: .75 !default;

// Panel Height
$panel-height: 300px !default; 

// Font Size

$base-font-size: 16px !default;
$base-line-height: 24px !default;


@mixin font-size($font-size, $line-height:true){
    font-size:$font-size;
    font-size:($font-size / $base-font-size)*1rem;
    @if $line-height == true{
        line-height:ceil($font-size / $base-line-height) * ($base-line-height / $font-size);
    }
}


//Panel Width
$panel-width: 40% !default;

// Panel Hover Font color

$panel-text-color: #fff !default;

$panel-corner-text-color: #fff !default;

// Extend Left

%left {
  float: left;
}

%right {
  float: right;
}

// Large

%small {
  max-width: 20%;
}

%large {
  max-width: 30%;
}

%larger {
  max-width: 50%;
}

%text-decoration {
  text-decoration: none;
}
@mixin border-box(){
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;

}

@mixin opacity($opacity) {
  opacity: $opacity;
  $opacity-ie: $opacity * 100;
  filter: alpha(opacity=$opacity-ie); //IE8
}

.product-item:before,.product-item:after,.product-item {
  @include border-box();
}


//== Style Container
//
//## Use .le as a container so that our styles do not trump IBM styles
//------------------------------------------------------------------------


.le {
  font-family: $font-family;
  font-weight: 400;
  font-size: 100%;
  line-height: 1.4;

  

//== Start all of your styles from this point.

.product-item,.content-item{
  height: $panel-height;
  margin: 20px auto;
  overflow: hidden;
  position: relative;
  width: $panel-width;
  .overlay{
    border-bottom: 110px solid $border-color;
    border-left: 150px solid transparent;
    bottom: 0;
    height: 0;
    @include opacity($opacity);
    position: absolute;
    right: 0;
    text-indent: -9999px;
    @include transition(all .5s ease-out);
    width: 0;
  }
  &:hover .overlay,.hover{
    border-bottom: 800px solid $border-hover-color;
    border-left: 800px solid transparent;
    @include transition(all .5s ease-out);
  }
  .corner-overlay-content{
    bottom: 15px;
    color: $panel-corner-text-color;
    position: absolute;
    font-weight: 900;
    right: 15px;
    @include transition(all .5s ease-out);
  }
  &:hover .corner-overlay-content,.hover{
    @include opacity(0);
    @include transition(all .5s ease-out);
  }
  .overlay-content{
    bottom: 0;
    color: $panel-text-color;
    left: 0;
    @include opacity(0);
    padding: 15px;
     position: absolute;
    right: 0;
    top: 0;
    @include transition(all .3s ease-out);
    h2{
      padding: 0 0 5px;
      margin: 0 0 5px 0;
      font-weight: 400;
    }
  }
  &:hover .overlay-content,.hover{
    @include opacity(1);
    @include transition(all .3s ease-out);
    @include transition-delay(.3s);
  }
}

.hover {
-webkit-user-select: none;
-webkit-touch-callout: none;
}
  
.overlay-content {
  p {
    @include font-size(14px);
    padding: .6125em;
    color: #fff;
  }
  
  .button {
    background: $leco-red;
    color: #fff;
    @include font-size(14px);
    padding:.6125em;
    text-align: center;
    @extend %text-decoration;
    &.left {
      @extend %left;
    }
    &.right {
      @extend %right;
    }
    &.large {
      @extend %large;
    }
    &.larger {
      @extend %larger;
    }
    &.small {
      @extend %small;
    }
  }
}  
}

Swipe-SCSS.markdown

Swipe SCSS

Code for Swipe

A Pen by Dylan Burkey on CodePen.

License.