Hey guys, Today in this blog you’ll learn about some hover effect animations and how can create List Items with Color filled background animation on mouse over by using Html and CSS. Guys you will see the effect when you place or move your mouse's arrow cursor on any list item of these the from the left side where you can see the different color borders on each list item then it will be covered its background area completely by floating from left to right side. If you are a beginner who has started to learn web development then guys you should try it, because learn about hover effects in css is not much difficult. Any beginners can learn it easily.

Watch Tutorial of Create Background Color Filled List Items using HTML & CSS

I have also given some links below of different type of project topics to learn "Hover Effects" in CSS. May hope you might like these also.

Now with this video, I'm sure you have understood the basics behind creating this program for those of you still finding it difficult I'll be linking the source code in the description for you.

HTML CODE:

  <!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">
      <link rel="stylesheet" href="style.css">
      <title>How to Create Background Color Filled List Items using HTML & CSS</title>
  </head>
  <body>
      <section></section>
          <div class="container">
          <li  id="l1"><a href="#">home</a></li>
          <li id="l2"><a href="#">menu</a></li>
          <li id="l3"><a href="#">skills</a></li>
          <li id="l4"><a href="#">services</a></li>
          <li id="l5"><a href="#">contact</a></li>
      </div>
  </body>
  </html>

CSS CODE:

  body{
      margin: 0;
      padding: 0;
  }
  section{
      position: absolute;
      min-height: 100vh;
      width: 100%;
      background: url(img.jpg);
      background-position: center;
      filter: brightness(40%) grayscale(1);
  }
  .container{
      position: absolute;
      width: 400px;
      background: rgba(0,0,0,0.7);
      top: 50%;
      left: 50%;
      transform: translate(-50%,-50%);
      z-index: 500;
      box-shadow: -2px -2px 6px rgba(255,255,255,0.3),
                  2px 2px 6px rgba(255,255,255,0.3);
  }
  .container li{
      list-style: none;
      height: 50px;
      line-height: 50px;
      text-transform: uppercase;
  }
  .container li a{
      color: white;
      font-family: sans-serif;
      text-decoration: none;
      display: block;
      position: relative;
      padding-left: 30px;
      font-weight: bold;
      letter-spacing: 2px;
  }
  .container #l1{
      width: 10px;
      transition: 0.7s ease-in;
      background: #0cf3fb;
  }
  .container #l1:hover{
      width: 100%;
  }

  .container #l2{
      width: 10px;
      transition: 0.7s ease-in;
      background: #fafd00;
  }
  .container #l2:hover{
      width: 100%;
  }
  .container #l3{
      width: 10px;
      transition: 0.7s ease-in;
      background: #ff000c;
  }
  .container #l3:hover{
      width: 100%;
  }
  .container #l4{
      width: 10px;
      transition: 0.7s ease-in;
      background: #0718fa;
  }
  .container #l4:hover{
      width: 100%;
  }
  .container #l5{
      width: 10px;
      transition: 0.7s ease-in;
      background: #00f92f;
  }
  .container #l5:hover{
      width: 100%;
  }

Note : This given Download button link may contains some ads link. So, you may be clicked many times for downloading the source code files. [Source code includes image also]

How to Create Background Color Filled List Items using HTML & CSS | Hover Effect Tutorial

Watch Tutorial of Create Background Color Filled List Items using HTML & CSS

Post a Comment

Post a Comment

How To Create Responsive Navigation Menu Bar With Search Box Using Html And CSS - WebKitCoding