List items hover effect using HTML and CSS

December 4, 2021 by Codingthai

Hello, learner In this article, we are going to create a List items hover effect using HTML and CSS. In the past post, we have created a Sun Reflection Animation Using HTML & CSS3. Now it is time to create a list of items hover effect.

List items hover effect using HTML and CSS

In the list items hover effect program there is a programming language list for the menu. In the HTML section, we have used ul and li tags for creating a list. In a simple way, we have to change the background color to back and the text to white. If mouse courser goes to the any list item it hovers by changing box border color for .4 second transition. if you are confused about what the output will come look above the image.

If you’re feeling difficult to understand what I am saying then you can watch the full video tutorial on the youtube

Video Tutorial of Items hover effect using css

In this video tutorial, you are going to the learn list item hover effect using HTML and CSS. If you know the basics of HTML and CSS coding then this is easy for you. Now I hope now you can understand the code.

List items hover effect using HTML and CSS [Source Code]

To create a digital and Analog clock using HTML and CSS3 you have to create two HTML and CSS files named index.html and style.css in the same folder and you have to link the CSS file to HTML. after that paste the HTML code in index.html and paste the CSS code in style.css that’s all after pasting the code.

At first, you have to create an HTML file named index.html and paste the below code on it, and save it. Remember to give a .html extension to the HTML file.

<!DOCTYPE html>
<html>
    <head>
        <title> Hover effect</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>
                <li>Python</li>
            </ul>   
        </div>
    </body>
</html>

After pasting the HTML code the second you have to create a CSS file named style.css. Paste the below code on it and save it. Again remember to give .css extension to CSS file.

*{
    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: 10px;
}
ul li::before,
ul li::after{
    content: '';
    position: absolute;
    z-index: -1;
    border-radius: 5px;
    width: 105%;
    transition: all .4s;
}
ul li::before{
    left: -10%;
    height: 130%;
    background: linear-gradient(to right, #021b79, #0575e6);
}
ul li::after{
    left: -10%;
    background: #ffffff56;
    backdrop-filter: blue(10px);
    box-shadow: 0 0 20px rgb(0, 0, 0,0.164);
}
ul li:hover::before{
    transform: translate(-2.5%);
}
ul li:hover::after{
    transform: translate(15%);
}

That’s all after after pasting the code now your code will successfully run. If you get any kind of error/problem in the code just comment down or contact me on social media

You might like this

Views: 220

Leave a Comment Cancel reply