I have taken the icons from font awesome website. But the hover is not functional here only.
I think <i> is causing some problem from font awesome website.
Can anyone tell why hover is not working at this place?
It is working well in other parts of the code.
Can anyone recreate this in his platform and tell which solution actually works.
.cont4 .icons li a:hover {
color: black;
/* transform: translateY(-20px); */
}
/* no kind of hover is working*/
.cont4 {
position: relative;
z-index: -1;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
background: linear-gradient(to bottom, rgb(243, 53, 205), rgb(255, 255, 255));
}
.cont4 .color {
position: absolute;
filter: blur(100px);
}
.cont4 .color:nth-child(1) {
background-color: rgb(241, 64, 233);
width: 2000px;
height: 600px;
top: -200px;
}
.cont4 .color:nth-child(2) {
background-color: aqua;
width: 800px;
height: 500px;
bottom: -150px;
left: 300px;
}
.cont4 .color:nth-child(3) {
background-color: rgb(223, 223, 104);
width: 800px;
height: 400px;
bottom: 0px;
right: 300px;
}
.cont4::before {
content: '';
position: absolute;
width: 100%;
height: 0%;
z-index: 1;
backdrop-filter: blur(5px);
border-top: 1px solid white;
}
.icons {
position: relative;
display: flex;
z-index: 45;
}
.icons li {
position: relative;
list-style: none;
margin: 10px;
}
.icons li a {
position: relative;
width: 100px;
height: 100px;
display: inline-block;
display: flex;
border: 1px solid white;
align-items: center;
justify-content: center;
text-decoration: none;
border-radius: 10px;
box-shadow: 0 5px 4px rgb(43, 38, 38);
backdrop-filter: blur(2px);
transition: 0.5s;
color: aliceblue;
font-size: 2em;
}<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.1.1/css/fontawesome.min.css" integrity="sha384-zIaWifL2YFF1qaDiAo0JFgsmasocJ/rqu7LKYH8CoBEXqGbb9eO+Xi3s6fQhgFWM" crossorigin="anonymous">
<div class="cont4">
<div class="color"></div>
<div class="color"></div>
<div class="color"></div>
<ul class="icons">
<li><a href="#"><i class="fa fa-facebook-f"></i></a></li>
<li><a href="#"><i class="fa fa-instagram" aria-hidden="true"></i></a></li>
<li><a href="#"><i class="fa fa-twitter" aria-hidden="true"></i></a></li>
<li><a href="#"><i class="fa fa-linkedin" aria-hidden="true"></i></a></li>
</ul>
</div>
<script src="https://kit.fontawesome.com/e44c8c4915.js" crossorigin="anonymous"></script>