CSS list items hover effects | html list hover animation

CSS list items hover effect | HTML list hover animation




CSS list item hover effects


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
 @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

List items hover CSS ouput

 Hope you like the CSS list items hover effect, you can see output video and project screenshots. See our other blogs and gain knowledge in front-end development. Thank you ๐Ÿ™๐Ÿ’•.

Post a Comment

Previous Post Next Post