Claymorphism List Hover Effect | List Hover Effect – Codewithrandom

Claymorphism list hover effect | list hover effect – Codewithrandom

Welcome🎉 to Code With Random blog. In this blog, we learn how to create Claymorphism List Hover Effect. We use HTML & CSS  for Claymorphism List Hover Effect. Hope you enjoy our blog so let’s start with a basic HTML structure for the Claymorphism List Hover Effect. 

HTML code

 <div class="container">  
<div class="list">
<h3>Popular Creators</h3>
<div class="list-item">
<div class="rank"><span>1</span></div>
<div class="name">
<h4>Sarah Brown</h4>
<p>Digital Artist</p>
</div>
</div>
<div class="list-item">
<div class="rank"><span>2</span></div>
<div class="name">
<h4>Alex Jason</h4>
<p>Musician</p>
</div>
</div>
<div class="list-item">
<div class="rank"><span>3</span></div>
<div class="name">
<h4>Natasha Wood</h4>
<p>Film Maker</p>
</div>
</div>
<div class="list-item">
<div class="rank"><span>4</span></div>
<div class="name">
<h4>Isa Zoe</h4>
<p>UI/UX Designer</p>
</div>
</div>
<div class="list-item">
<div class="rank"><span>5</span></div>
<div class="name">
<h4>Ali Mohammad</h4>
<p>Director</p>
</div>
</div>
<div class="list-item">
<div class="rank"><span>6</span></div>
<div class="name">
<h4>Noah Shi</h4>
<p>Architecture</p>
</div>
</div>
</div>
</div>

There is all HTML code for the Claymorphism List Hover Effect. Now, you can see output without CSS, then we write CSS for the Claymorphism List Hover Effect.

 @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;300;400;500;600;700;800;900&display=swap');  
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
.container {
width: 100%;
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background: #2f363e;
}
.list {
position: relative;
width: 350px;
min-height: 500px;
padding: 50px;
background: #2f363e;
box-shadow: 25px 25px 75px rgba(0, 0, 0, 0.25),
10px 10px 70px rgba(0, 0, 0, 0.25),
inset 5px 5px 10px rgba(0, 0, 0, 0.5),
inset 5px 5px 20px rgba(255, 255, 255, 0.2),
inset -5px -5px 15px rgba(0, 0, 0, 0.75);
border-radius: 30px;
}
.list h3 {
color: #fff;
font-size: 1.2rem;
font-weight: 700;
}
.list-item {
position: relative;
display: flex;
align-items: center;
margin: 20px 0;
cursor: pointer;
}
.list-item::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 45px;
height: 45px;
background: #1f83f2;
border-radius: 22.5px;
box-shadow: 5px 5px 7px rgba(0, 0, 0, 0.25),
inset 2px 2px 5px rgba(255, 255, 255, 0.5),
inset -3px -3px 5px rgba(0, 0, 0, 0.5);
transition: 0.5s;
}
.list-item:hover::before {
width: 100%;
}
.list-item .rank {
position: relative;
min-width: 45px;
height: 45px;
display: flex;
justify-content: center;
align-items: center;
border-radius: 50%;
margin-right: 10px;
}
.list-item .rank::before {
content: '';
position: absolute;
width: 30px;
height: 30px;
background: #2f363e;
border-radius: 30px;
transform: scale(0);
transition: 0.5s;
}
.list-item:hover .rank::before {
transform: scale(1);
}
.list-item .rank span {
position: relative;
font-size: 1rem;
font-weight: 600;
color: #fff;
transition: 0.5s;
}
.list-item .name {
position: relative;
line-height: 1.15rem;
}
.list-item .name h4 {
font-weight: 600;
color: #bcbcc0;
transition: 0.5s;
}
.list-item .name p {
font-size: 0.8rem;
font-weight: 400;
color: #95999d;
transition: 0.5s;
}
.list-item:hover .name h4,
.list-item:hover .name p {
color: #fff;
}

We have completed our CSS section,  Here is our final updated output CSS.

Final Output

We have completed our CSS section,  Here is our updated output with CSSHope you like the Claymorphism List Hover Effect, you can see output project screenshots. See our other blogs and gain knowledge in front-end development. Thank you 🙏💕

This post teaches us to create Claymorphism List Hover Effect using simple HTML & CSS. If we made a mistake or any confusion, please drop a comment to reply or help you in easy learning.

Written by – Code With Random/Anki 

code by – Morteza

Check out more…..



Leave a Reply