How to design animated hover list ui with html and css

RH Suman
July 6, 2022

106

CSS hover effects allow elements to load quickly. Most web designers prefer CSS animations as they are easy to employ.
How to design animated hover list ui with html and css

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%;
}

Tags

HTML CSS Animation Hover Card Box List

Subscribe

Get Updates

Subscribe our newsletter to get the last update into your inbox!

Please insert email address.

Recommended Posts