CODEWITHSUNDEEP
htmlcss
yashthe
yashthe

Reputation: 3

Change the background of fa icon on hover

I want to achieve the background changing animation while hovering like this codepen. I tried converting the stylus into css but still I cannot make it work. I also tried using the before and after pseudo elements but I still cannot get the results. I changed the background to a gradient and tried to change background position to achieve this but failed in this as well. Sorry I am a newbie to web development.

.social-buttons {
  position: absolute;
  top: 100px;
  left: 20px;
}

.social-buttons ul {
  list-style: none;
}

.social-buttons ul li {
  position: relative;
  height: 50px;
  width: 50px;
  background-color: white;
  border-radius: 10px;
  margin: 10px 0px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}

.social-buttons ul li .fa {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 25px;
  transition: all 0.1s ease-in;
}

.fa-instagram {
  background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.fa-pinterest {
  color: red;
}

.fa-facebook {
  color: blue;
}

.fa-youtube {
  color: red;
}

.social-buttons ul li:hover .fa {
  font-size: 30px;
  color: black;
}

.social-buttons ul li:hover .fa-instagram {
  color: black;
  background: none;
  -webkit-text-fill-color: unset;
}
<script src="https://kit.fontawesome.com/fc692f1356.js" crossorigin="anonymous"></script>

<div class="social-buttons">
  <ul>
    <a href="#">
      <li>
        <i class="fa fa-instagram"></i>
      </li>
    </a>
    <a href="#">
      <li>
        <i class="fa fa-pinterest"></i>
      </li>
    </a>
    <a href="#">
      <li>
        <i class="fa fa-facebook"></i>
      </li>
    </a>
    <a href="#">
      <li>
        <i class="fa fa-youtube"></i>
      </li>
    </a>
  </ul>

Upvotes: 0

Views: 246

Answers (1)

Chris W.
Chris W.

Reputation: 23270

So the way they're showing in that example I might recommend an alternate method in this case and utilize transform with a keyframe animation instead of property transition so you get a little perk from the GPU.

The pseudo element is a good way and the cubic-bezier adds the bouncy effect, except I didn't take the one from your example because it felt like a jerky animation. However this should get you closer to your goal. Also changed your li to the anchors with display: list-item and a couple other things to steer towards some WCAG. Cheers.

.social-buttons {
  position: absolute;
  top: 100px;
  left: 20px;
}

.social-buttons ul {
  list-style: none;
}

.social-buttons ul a {
  display: list-item;
  position: relative;
  height: 50px;
  width: 50px;
  background-color: white;
  border-radius: 10px;
  margin: 10px 0px;
  overflow: hidden;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}

@keyframes topRight {
  to { transform: rotate(-45deg) translate(0,0) };
}

.social-buttons ul a:before {
  content: "";
  display: block;
  height: 150px;
  width: 100px;
  position: absolute;
  top: -50px;
  left: 0;
  background-color: #0f0;
  transform: rotate(-45deg) translate(-100px, -100px);
}

.social-buttons ul a:hover:before {
  animation: topRight .5s cubic-bezier(.22,.68,0,1.71) forwards;
}

.social-buttons ul a .fa {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 25px;
  transition: all 0.1s ease-in;
}

.fa-instagram {
  background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.fa-pinterest {
  color: red;
}

.fa-facebook {
  color: blue;
}

.fa-youtube {
  color: red;
}
<script src="https://kit.fontawesome.com/fc692f1356.js" crossorigin="anonymous"></script>


<div class="social-buttons">
  <ul>
    <a href="#">
        <i class="fa fa-instagram"></i>
    </a>
    <a href="#">
        <i class="fa fa-pinterest"></i>
    </a>
    <a href="#">
        <i class="fa fa-facebook"></i>
    </a>
    <a href="#">
        <i class="fa fa-youtube"></i>
    </a>
  </ul>

Upvotes: 1

Related Questions