如何在图像外观上悬停动画？

Question

我有这个代码。如何在不丢失文本内容的情况下为悬停外观设置动画？ http://codepen.io/ijijjnjnjn/pen/ZLVJQr

    <div class="girls-15">
  <div class="kitty">
    <p> TEXT </p>
  </div>
</div>

<div class="sprite-test">
  <div class="kitty">
    <p> TEXT </p>
  </div>
</div>

CSS：

    .girls-15, .sprite-test
{ display: inline-block; background: url('http://i.imgur.com/YZJiO7b.png') no-repeat; overflow: hidden; text-align: left; }

.girls-15 { background-position: -0px -0px; width: 200px; height: 200px; }
.sprite-test { background-position: -0px -200px; width: 200px; height: 200px; }
p {margin:0; color: red}

.kitty {
  width: 100%;
  height: 100%;

}

.kitty:hover {
  background-image: url('http://i.imgur.com/6cEsPeM.jpg');
  background-position: -0px -0px;
  transition: all 0.3s;
}

Answer 1

这是你想要的吗？ http://codepen.io/anon/pen/wgRrpx

它使用opacity为背景图像设置动画，因为background-image属性无法在CSS中直接设置动画。它还使用了一些jQuery来保留元素的内容。