Плавное изменение позиции фона

.block { 
  position: relative;  
  width: 200px; 
  height: 30px; 
  text-align: center; 
  line-height: 30px; 
  overflow: hidden; 
} 
.block span { 
  position: relative; 
  color: white; 
  transition: all 200ms linear; 
  z-index: 2; 
} 
.block:hover span {color: #363636} 
 
.block:after { 
  display: block; 
  content: ''; 
  position: absolute; 
  width: 100%; 
  height: 100%; 
  top: 0; 
  left: 0; 
  background-color: #363636; 
  transition: all 200ms linear; 
  z-index: 1; 
} 
.block:hover:after {top: 100%;}

<div class="block"><span>Портфолио</span></div>

$(function() { 
  $('.block').mouseover(function() { 
    $(this).stop().animate({'background-position-y': '-100%'}, 200); 
  }); 
  $('.block').mouseout(function() { 
    $(this).stop().animate({'background-position-y': '0%'}, 200); 
  }); 
});

.block { 
  position: relative;  
  width: 200px; 
  height: 30px; 
  text-align: center; 
  background-image: url(https://srcc.oboi.ws/wallpapers/big_11420_oboi_seryj_fon.jpg); 
  background-size: 100%; 
  background-position: 0% 0%; 
  background-repeat: no-repeat; 
  line-height: 30px; 
  overflow: hidden; 
} 
.block span { 
  position: relative; 
  color: white; 
  transition: all 200ms linear; 
  z-index: 2; 
} 
.block:hover span {color: #363636}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="block"><span>Портфолио</span></div>

nav li a { 
    float: left; 
    padding: 10px 22px; 
    line-height: 1; 
    font-size: 11px; 
    text-transform: uppercase; 
    letter-spacing: 1px; 
    color: #666; 
    top: 0; 
    position: relative; 
    -webkit-transition: all 100ms linear; 
    -moz-transition: all 100ms linear; 
    -o-transition: all 100ms linear; 
    -ms-transition: all 100ms linear; 
    transition: all 100ms linear; 
} 
 
nav li a.act-link:before { 
    content: ''; 
    position: absolute; 
    bottom: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    background: #f5f5f5; 
    -webkit-transition: all 200ms linear; 
    -moz-transition: all 200ms linear; 
    -o-transition: all 200ms linear; 
    -ms-transition: all 200ms linear; 
    transition: all 200ms linear; 
    z-index: -1; 
} 
 
nav li a.act-link:hover:before { 
    height: 0; 
}

<nav><ul><li><a class="act-link">Portfolio</a></li></ul></nav>