可以用CSS动画嵌套图像吗？-PossibletoanimatenestedimagewithCSS?

I've created a block that displays a series of images when you hover over it using only CSS.

我创建了一个块,当你只使用CSS将鼠标悬停在它上面时会显示一系列图像。

Codepen

HTML

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;
}

My question is: would it be possible to animate an "img" nested within the main "div" instead of animating the 'background-image' with 'background-position'? I need the image to 'fill' the div it's inside of when the screen is resized, and achieving this with a 'background-image' has been a head-scratcher.

我的问题是:是否可以在主“div”中嵌套“img”,而不是用'background-position'动画'background-image'?当屏幕调整大小时,我需要图像“填充”它内部的div,并且使用“背景图像”实现这一点一直是一个令人头疼的问题。

Any suggestions/advice will be much appreciated!

任何建议/意见将不胜感激!

(I'm definitely not opposed to using Javascript/jQuery if necessary, simply wanted to see if what I'm trying to do is possible with CSS alone)

(我绝对不反对在必要时使用Javascript / jQuery,只是想看看我单独使用CSS是否可以做到这一点)

1 个解决方案

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;
}