Lista con animaciones

2,796 Andev.web

Abrir en el editor Publica tu código

Recomendado

29 August 2024

Página 404 con paralaje

11 August 2025

Contenedor de animación de mensajes HTML

22 August 2025

Ejemplo de botones de contacto HTML

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;
}