List with animations

3,085 Andev.web

Remix Open In Editor Publish Your Code

List with animations

Recommended

15 October 2026

Game Portal Theme with Dark Mode in HTML and CSS

21 July 2025

HTML Login Form with Geometric Background

21 July 2025

File Upload Input with SVG Icon

HTML

CSS

@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;500;600;700&display=swap');

body{
  font-family: 'Nunito', sans-serif;
  background-color:#f5f4f6 ;
}

*,
*::before,
*::after{
	padding: 0px;
	margin: 0px;
	box-sizing: border-box;
}

.container{
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 100px 0px;
}

.list-container{
	width: 400px;
	text-align: center;
}

.card{
	height: 95px;
	width: 100%;
	background: white;
	margin-top: 10px;
	border-radius: 5px;
	cursor: pointer;
	display: flex;
	overflow: hidden;
	transition: 0.3s;
}

h2{
	padding-bottom: 14px;
}

.content-container{
	width: 80%;
	height: 100%;
	display: flex;
	align-items: center;
}

.game-image1{
	width: 70px;
	height: 70px;
	margin-left: 10px;
	background-image: url("https://play-lh.googleusercontent.com/WNWZaxi9RdJKe2GQM3vqXIAkk69mnIl4Cc8EyZcir2SKlVOxeUv9tZGfNTmNaLC717Ht");
	background-position: center;
	background-size: cover;
	border-radius: 5px;
}

.game-image2{
	width: 70px;
	height: 70px;
	margin-left: 10px;
	background-image: url("https://play-lh.googleusercontent.com/Lf-c_8Tk6ppqF8aGmMhWNDFvWDmKakkRXGXZh0e33xHlgJ4o3n7D-eIVCOGT8X7eeuY");
	background-position: center;
	background-size: cover;
	border-radius: 5px;
}

.game-image3{
	width: 70px;
	height: 70px;
	margin-left: 10px;
	background-image: url("https://play-lh.googleusercontent.com/uHoOYJbKRC6qIbZ6uhJHpK9LtVUb6kh85gDGvn3LRPAzJY9bCk9QvicK3fMRb2ELkQ");
	background-position: center;
	background-size: cover;
	border-radius: 5px;
}

.game-name{
	margin-left: 30px;
	font-size: 20px;
}

.image{
	width: 100%;
	height: 100%;
}

.rating{
	transition: 0.5s; 
	width: 20%;
	display: flex;
	align-items:center;
	justify-content: center;
	transform: translateX(100px);
}

.card:hover .rating{
	transform: translateX(0px);
}

.list-container:hover .card{
	filter: blur(5px);
	opacity: 0.5;
}

.list-container .card:hover{
	transform: scale(1.1);
	filter: blur(0px);
	opacity: 1;
}

JS