Launch Countdown Timer using Flexbox, CSS & jQuery

I faced problem while making the card flip from the middle, when a number changes, and while changing the colour of svg at hover

I somehow managed to make card flip from the middle using complex jQuery:

const flip = function ($el) {
	const $elClone = $el
		.clone()
		.css({
			position: 'absolute',
			top: '0',
			left: '0',
			'z-index': '10',
			'background-color': 'hsl(236, 21%, 26%)',
		})
		.prependTo($el.parent());

	setTimeout(() => $elClone.addClass('flip'));
	setTimeout(() => $elClone.fadeOut(() => $elClone.remove()));
};

I got the solution of my second problem from internet, I don't even understand this:

a:hover img {
	filter: invert(53%) sepia(39%) saturate(3008%) hue-rotate(312deg)
		brightness(103%) contrast(97%);
}