Transition sur un background image

Bonjour je suis actuellement entrain de crée un site internet et dans le footer je voulais faire des transition notamment avec le lien qui emmène sur intagrame. Je me suis rendu compte qu'il était impossible de faire une transition avec un background image. J'aimerais donc savoir si quelqu'un a un technique pour quand même avoir une transition

<footer>
			<ul>
				<a href="https://www.instagram.com/ilynx_/?hl=fr"><li id="insta"><img src="images/instagram.png" />Instagram ilynx_</li></a>
				<a href="https://www.facebook.com/ilynx_-106408177500434/?ref=page_internal"><li id="facebook"><img src="images/facebook.png"/>Facebook ilynx_</li></a>
				<a href="mailto:email.contact@gmail.com"><li id="email"><img src="images/email.png"/>email.contact@gmail.com</li></a>
				<li id="copy"><img src="images/copy.png" />Olivier Lefez</li>
			</ul>
</footer>

footer{
	background: linear-gradient(white ,#808080);
	margin-bottom: 0px;
}
footer ul{
	min-width: 265px;
	display: inline-table;
	padding-bottom: 20px;
	padding-top: 20px;
	margin-bottom: 0px;
	margin-left: 5%;
}
footer img{
	vertical-align: middle;
	margin-right: 5px;
}
footer li{
	padding: 5px;
	border-radius: 25px;
	transition: all 1s;
	margin-bottom: 5px;
}
footer a{
	color: #111111;
	text-decoration: none;
}
footer #email img{
	margin-right: 10px;
}
footer #copy img{
	margin-right: 9px;
}
footer #insta img{
	margin-right: 7px;
}
#facebook:hover{
	background-color: #c4a667;
	filter: invert(100%);
}

Dans l'idee le but est de faire la meme chose qu'avec le lien facebook mais avec

background-image: radial-gradient(circle at 15% 207%, #fdf497 0%, #fdf497 5%,#fd5949 45%, #d6249f 60%,#285aeb 95%);

Merci beaucoup je dois avouer que je ne comprends pas toujours avec les before et after mais merci