WEBLEB
Home
Editor
Login
Pro
English
English
Français
Español
Português
Deutsch
Italiano
हिंदी
List with animations
2057
Andev.web
Open In Editor
Publish Your Code
Recommended
21 July 2025
HTML Login Form with Geometric Background
16 September 2025
Coin Transfer tiktok Form with Payment Selection
8 November 2023
404 Page Not Found with CSS
HTML
Copy
Top 3 Mobile Games
Roblox
#1
Subway Surfers
#2
Stumble Guys
#3
CSS
Copy
@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
Copy