JSFiddle - React, Tailwind, and code Playground

by Damien M

HTML

<div class="conteneur">
		<a href="#" class="social"><img src="twi.png" alt="social" /><div class="fond_twi"></div></a>
		<a href="#" class="social"><img src="face.png" alt="social" /><div class="fond_face"></div></a>
	</div>

CSS

.conteneur{
display : flex;
justify-content : center;
align-items : center;	
}
.social{
	position : relative;
	background-color : rgba(0,0,0,0.2);
	width : 40px;
	height : 40px;
	display : flex;
	justify-content : center;
	align-items : center;
	border-radius : 50%;
	overflow : hidden;
}
.social img{
	z-index : 2;
	width : 30px;
	height : 30px;
}
.fond_twi, .fond_face{
	top : -40px;
	z-index : 1;
	display : block;
	height : 40px;
	width : 40px;
	position : absolute;
	transition : 0.5s;
}
.fond_twi{
		background-color : #55acee;
}
.fond_face{
	background-color : #3b5999;
}
.social:hover .fond_twi{
	top : 0;
}
.social:hover .fond_face{
	top : 0;
}