Question 219366 in Html Question posted in
Some basic documentation can be found here.

Html – Why is my :hover css attribute not working?

I am making a website to hold all my projects, and I want an effect on where you hover over a Font awesome icon, it pulses in and out, however the :hover effect isn’t working at all. Even trying to change the font-size doesn’t work. I believe that something in the Font awesome sdk is overriding it, but there is every chance I’m just a fool.

Here is the CSS

body {
    display: flex;
    height: 100vh;
    margin: 0;
}

.body-container {
    display: flex;
    align-items: center;
}

.links i {
    font-size: 30px;
    padding-right: 10px;
    transition: transform 0.2s ease-in-out;
}

.links i:hover {
    animation: pulse 3s forwards;
}

@keyframes pulse {
    0% {
        transform: scale(1);
      }
      50% {
        transform: scale(1.2);
      }
      100% {
        transform: scale(1);
      }
}

.fade-in {
    animation: fadeInAnimation 2s forwards;
}

@keyframes fadeInAnimation {
    to {
        opacity: 1;
    }
}

::-webkit-scrollbar {
    display: none;
}

Here is the HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Portfolio</title>
    <script src="https://kit.fontawesome.com/19a251552a.js" crossorigin="anonymous"></script>
</head>
<body>
    <div class="body-container fade-in">
        <div class="home-text fade-in">
            <h1>Damilola Owonibi</h1>
            <p>Front End Developer</p>
            <div class="links">
                <i class="fa-brands fa-github"></i>
                <i class="fa-brands fa-twitter"></i>
                <i class="fa-brands fa-facebook"></i>
                <i class="fa-brands fa-linkedin"></i>
            </div>
        </div>
        <div class="image-div fade-in">
            <img src="img/prof.png" id="image-div-pic" alt="">
        </div>
    </div>
    <div class="area" >
        <ul class="circles">
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
        </ul>
</div >
</body>
</html>
Tags:

2

Answers


  1. 0

    See MDN on transform:

    Warning: Only transformable elements can be transformed. That is, all elements whose layout is governed by the CSS box model except for: non-replaced inline boxes, table-column boxes, and table-column-group boxes.

    The i element is, by default, display: inline and thus generates a non-replaced inline box.

    Login or Signup to reply.
  2. 0

    Looks like things are working here, but there could issues in different browsers. Being that in <i> is an inline element, it could also cause issues. Give the <i> elements display: inline-block;. That should help. Additionally, if you want the item to really pulse, make sure to add infinite to the hover animation rule.

    body {
    display: flex;
    height: 100vh;
    margin: 0;
}

.body-container {
    display: flex;
    align-items: center;
}

.links i {
    display: inline-block;
    font-size: 30px;
    padding-right: 10px;
    transition: transform 0.2s ease-in-out;
}

.links i:hover {
    animation: pulse 1s forwards infinite;
}

@keyframes pulse {
    0% {
        transform: scale(1);
      }
      50% {
        transform: scale(1.2);
      }
      100% {
        transform: scale(1);
      }
}

.fade-in {
    animation: fadeInAnimation 2s forwards;
}

@keyframes fadeInAnimation {
    to {
        opacity: 1;
    }
}

::-webkit-scrollbar {
    display: none;
}
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Portfolio</title>
    <script src="https://kit.fontawesome.com/19a251552a.js" crossorigin="anonymous"></script>
</head>
<body>
    <div class="body-container fade-in">
        <div class="home-text fade-in">
            <h1>Damilola Owonibi</h1>
            <p>Front End Developer</p>
            <div class="links">
                <i class="fa-brands fa-github"></i>
                <i class="fa-brands fa-twitter"></i>
                <i class="fa-brands fa-facebook"></i>
                <i class="fa-brands fa-linkedin"></i>
            </div>
        </div>
        <div class="image-div fade-in">
            <img src="img/prof.png" id="image-div-pic" alt="">
        </div>
    </div>
    <div class="area" >
        <ul class="circles">
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
        </ul>
</div>
</body>
</html>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search