Responsive animation, pictures?

Question

css

Hello.
There is an image in the bootstrap slider (as you know, with different browser sizes, the image will adjust), two images are superimposed on it (position: absolute). I adjusted them with handles (left, top) and everything seems to be fine, but when you change the size of the browser window, the pictures leave. It doesn't matter that I do everything through - media, but it's very steamy and there is probably some good option. Please help me find him.
On hover, an animation is triggered and the text("October") flickers. The fact is that this is not the only animation in this block, several more pictures will be superimposed, which will be activated when you hover, and when you hover over the clock, there is one sick animation that combines all the elements in the block.

Answer 1

The easiest way is to merge images.

Answer 2

Try setting the size of the overlay block as a percentage. And positioning through top and left should also be done as a percentage