Возможность анимации вложенного изображения с помощью CSS?

Question

Я создал блок, который отображает серию изображений, когда вы наводите на него курсор, используя только CSS.

Codepen

HTML

<div class="logos"></div> 

CSS

body{ 
background: #fff; 
} 

.logos{ 
width: 400px; 
height: 400px; 
margin: auto; 
background: url('http://45.79.67.59/logo_thumb_bar.jpg') left center; 
} 

@keyframes play{ 
100% { background-position: 2000px; } 
} 
.logos:hover{ 
-webkit-animation: notexistent; 
animation: notexistent; 
animation: play 2.5s steps(5) infinite; 
} 

Мой вопрос: возможно ли было бы анимировать "IMG", вложенное в главном "DIV" вместо анимации «background-image» с «background-position»? Мне нужно изображение, чтобы «заполнить» div, в котором он находится, когда размер экрана изменяется, а достижение этого с «фоновым изображением» было головным скрестом.

Любые предложения/советы будут высоко оценены!

(я определенно не против использования JavaScript/JQuery, если это необходимо, просто хотел посмотреть, что я пытаюсь сделать, это возможно с помощью CSS в одиночку)

Answer 1

Если размер в DIV с помощью окна просмотра единиц, и установить размер фона для покрытия, он должен работать с CSS и быть отзывчивым.

codepen

body { 
    background: #fff; 
} 

.logos { 
    width: 40vw; 
    height: 40vw; 
    margin: auto; 
    background: url('http://45.79.67.59/logo_thumb_bar.jpg'); 
    background-size: cover; 

} 

@keyframes play { 
    100% { background-position: 200vw; } 
} 
.logos:hover{ 
    -webkit-animation: notexistent; 
    animation: notexistent; 
    animation: play 2.5s steps(5) infinite; 
}