How to design animated hover list UI with HTML and CSS

CSS hover effects allow elements to load quickly. Most web designers prefer CSS animations as they are easy to employ.

HTML Code:

<div class="card">
    <h2>Latest Post</h2>
    <ul>
      <li><a href="">Why the world would end without political polls</a></li>
      <li><a href="">Lamborghini makes Huracán GT3 racer faster for 2019</a></li>
      <li><a href="">MotoGP: Which team needs what in 2019?</a></li>
      <li><a href="">The Bride Was a Dream in a Dirndl, but Putin Stole the Show</a></li>
      <li><a href="">Lorem Ipsum is simply dummy.</a></li>
    </ul>
  </div>

CSS Code:

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400&display=swap');
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body{
  background-color: #229999;
  font-family: 'Roboto', sans-serif;
}
.card{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 300px;
  background-color: #fff;
  box-shadow: 0 0 10px 0 rgba(0,0,0,0.5);
  border-radius: 4px;
}
.card h2{
  padding: 10px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
  font-weight: 400;
  color: 1e293b;
}
.card ul{
  margin: 0;
  padding: 0;
}
.card ul li{
  list-style-type: none;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
.card ul li:last-child{
  border-bottom: none;
}
.card ul li a{
  display: block;
  color: #000;
  text-decoration: none;
  padding: 10px;
  position: relative;
  font-size: 1rem;
  font-weight: 300;
  z-index: 1;
  transition: .5s ease-in-out;
}
.card ul li a:hover{
  color: #fff;
}
.card ul li a:before{
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 100%;
  background-color: #299;
  z-index: -1;
  transition: .5s ease-in-out;
}
.card ul li a:hover:before{
  width: 100%;
}
RH Suman
RH Suman
Articles: 64

Newsletter Updates

Enter your email address below to subscribe to our newsletter

Leave a Reply