Html CSS过渡背景渐变（Hack）

我正试图使用背景位置/过渡黑客发现和动画的背景过渡面板悬停。。。我不确定我做错了什么，但这对我不起作用

以下是我到目前为止的相关代码（使用BootstrapV3）

html:

<div class="panel panel-default">
  <div class="panel-body">
    <span class="glyphicon glyphicon-link" aria-hidden="true"></span>
    <strong>Portfolio Name: &nbsp;&nbsp;&nbsp;</strong>Foo
  </div>
</div>

.panel,
.panel-default {
  border-radius: 3rem;
  cursor: pointer;
  cursor: hand;
  overflow: hidden;
}

.panel-body {
  background-image: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#f4f4f4));
  background-image: -webkit-linear-gradient(#fff, #f4f4f4);
  background-image: -moz-linear-gradient(#fff, #f4f4f4);
  background-image: -o-linear-gradient(#fff, #f4f4f4);
  background-image: linear-gradient(#fff, #f4f4f4);
  -webkit-background-size: auto 200%;
  background-size: auto 200%;
  background-position: 0 100%;
  font-size: medium;
  padding-left: 56px;
  padding-left: 3.5rem;
  -webkit-transition: all 1s linear;
  -moz-transition: all 1s linear;
  -o-transition: all 1s linear;
  transition: all 1s linear;

  .glyphicon-link {
    padding-right: 56px;
    padding-right: 3.5rem;
  }
}

.panel-body:hover {
  background-image: -webkit-gradient(linear, left top, left bottom, from(#337ab7), to(#093479));
  background-image: -webkit-linear-gradient(#337ab7, #093479);
  background-image: -moz-linear-gradient(#337ab7, #093479);
  background-image: -o-linear-gradient(#337ab7, #093479);
  background-image: linear-gradient(#337ab7, #093479);
  background-position: 0 0;
  color: white;
  padding-left: 88px;
  padding-left: 5.5rem;
}

.panel-body:active {
  background-image: -webkit-gradient(linear, left top, left bottom, from(#1eb759), to(#4f8547));
  background-image: -webkit-linear-gradient(#1eb759, #4f8547);
  background-image: -moz-linear-gradient(#1eb759, #4f8547);
  background-image: -o-linear-gradient(#1eb759, #4f8547);
  background-image: linear-gradient(#1eb759, #4f8547);
}

---

我还设置了一个：

您正在

上设置一个新的
背景图像
：hover
-您只需要调整
上的
背景位置
：hover


.panel，
.面板默认值{
边界半径：3rem；
光标：指针；
光标：手；
溢出：隐藏；
}
.小组委员会{
背景图像：-webkit线性渐变（顶部，#fff 0%，#F4 25%，#337ab7 75%，#093479 100%）；
背景图像：线性渐变（至底部，#fff 0%，#F4 25%，#337ab7 75%，#093479 100%）；
背景尺寸：自动400%；
背景位置：0；
字号：中等；
左侧填充：56px；
左侧填充：3.5雷姆；
-webkit转换：所有1s线性；
过渡：所有1s线性；
}
.面板主体.图标链接{
右边填充：56px；
右侧填充：3.5rem；
}
.面板主体：悬停{
背景位置：0.100%；
颜色：白色；
左侧填充：88px；
左侧填充：5.5雷姆；
}
.面板主体：激活{
背景图像：-webkit渐变（线性、左上、左下、从（#1eb759）到（#4f8547））；
背景图像：-webkit线性渐变（#1eb759，#4f8547）；
背景图像：线性梯度（#1eb759，#4f8547）；
}

投资组合名称：Foo
不确定您希望转换的行为。这是总的想法。。。也许是这样？谢谢是的，我希望它看起来淡入淡出。。。也许我需要用不透明的东西来重新思考这个问题…NP。让我知道你是否想让我把它作为一个答案提交，或者用它做些别的事情。我编辑了评论，尝试了一个更为渐变的过渡，就是这样！谢谢你，伙计，请将此作为回答：）