Generated by SassMeister.com.

SassMeister-input.scss

// ----
// Sass (v3.4.0.rc.3)
// Compass (v1.0.0.rc.1)
// ----

//Thanks:http://www.lukeharrison.net/blog/4-useful-sass-mixins/
@mixin animated-caption($font-color, $bg-color, $bg-opacity, $padding, $transition-speed) {
  display:inline-block;
  position:relative;
  overflow:hidden;
  & img {
    display:block;
    width:100%;
    height:auto;
  }
  & span.outer {
    display:block;
    width:100%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding:$padding;
    color:$font-color;
    position:absolute;
    bottom:-100px;
    -webkit-transition: bottom $transition-speed ease;
    -moz-transition: bottom $transition-speed ease;
    -o-transition: bottom $transition-speed ease;
    -ms-transition: bottom $transition-speed ease;
    transition: bottom $transition-speed ease;
    & span.inner{
      margin:0px;
      position:relative;
    }
    &:before{
      content: " ";
      display:block;
      position:absolute;
      z-index:0;
      left:0px;
      top:0px;
      width:100%;
      height:100%;
      background:$bg-color;
      filter: alpha(opactiy=($bg-opacity * 100));
      -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=#{$bg-opacity * 100})";
      -moz-opacity: $bg-opacity;
      -khtml-opacity: $bg-opacity;
      opacity: $bg-opacity;
    }
  }
  &:hover span.outer{
    bottom:0px;
  }
}
//Usage:
a{
  @include animated-caption(#ffffff, #333333, 0.75, 10px, 0.5s)
}

SassMeister-output.css

a {
  display: inline-block;
  position: relative;
  overflow: hidden;
}
a img {
  display: block;
  width: 100%;
  height: auto;
}
a span.outer {
  display: block;
  width: 100%;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  padding: 10px;
  color: #ffffff;
  position: absolute;
  bottom: -100px;
  -webkit-transition: bottom 0.5s ease;
  -moz-transition: bottom 0.5s ease;
  -o-transition: bottom 0.5s ease;
  -ms-transition: bottom 0.5s ease;
  transition: bottom 0.5s ease;
}
a span.outer span.inner {
  margin: 0px;
  position: relative;
}
a span.outer:before {
  content: " ";
  display: block;
  position: absolute;
  z-index: 0;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  background: #333333;
  filter: alpha(opactiy=75);
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=75)";
  -moz-opacity: 0.75;
  -khtml-opacity: 0.75;
  opacity: 0.75;
}
a:hover span.outer {
  bottom: 0px;
}