Как анимация наведите на изображение?

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, чтобы сохранить содержимое ваших элементов.