如何動畫懸停在圖像外觀上？

我有這段代碼。如何在不丟失文本內容的情況下製作懸停外觀動畫？ 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; 
}

來源

2017-02-12 ijijjnjnjn

目前還不清楚你在問什麼。您的CodePen當前不會在懸停上顯示任何更改。 – TylerH

這是個玩笑嗎？出現懸停貓。 – ijijjnjnjn

我想動畫.kitty div。 – ijijjnjnjn