CSS list items hover effect | HTML list hover animation
Welcome🎉 to Code With Random blog. In this blog, we learn that how we how to create list items hover effect . We use HTML & CSS for this list items hover effect . Hope you enjoy our blog so let's start with a basic HTML structure for list items hover effect .
HTML code -- List items hover CSS
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>List Design</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JAVASCRIPT</li>
<li>NODE JS</li>
</ul>
</div>
</body>
</html>
There is all HTML code for the list items hover effect. Now, you can see output without CSS, then we write CSS for our list items hover effect.Output
Javascript project ideas with complete source code
CSS code -- List items hover CSS
@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
body{
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
ul li{
width: 200px;
height: 35px;
display: flex;
align-items: center;
margin: 1.5em;
cursor: pointer;
padding: 1em;
background:rgb(43, 43, 43);
position: relative;
color: white;
border-radius: 5px;
}
ul li::before,
ul li::after{
content: '';
position: absolute;
z-index: -1;
border-radius: 5px;
width: 105%;
transition: all .4s;
}
ul li::before{
left: 0%;
height: 130%;
background: linear-gradient(to right, #021B79, #0575E6);
}
ul li::after{
left: -10%;
height: 120%;
background: #ffffff56;
backdrop-filter: blur(10px);
box-shadow: 0 0 20px rgba(0, 0, 0, 0.164);
}
ul li:hover::before{
transform: translateX(-2.5%);
}
ul li:hover::after{
transform: translateX(15%);
}
Now we have completed our CSS section, Here is our updated output CSS.
Output
Check it more
HTML - CSS project ideas by Code With Random
calculator Html javascript | calculator javascript code
bootstrap navbar - responsive bootstrap navbar
notification CSS style | Html top bar slide down notification CSS
CSS responsive menu | CSS animated Menu
countdown timer HTML javascript | free countdown timer
A Custom checkbox in CSS? | Create a custom checkbox using CSS?
In this post, we learn how to create a list items hover effect using simple HTML & CSS . If we made a mistake or any confusion, please drop a comment to reply or help you in easy learning.
Post a Comment