Trying to add animations to project

https://www.codecademy.com/paths/front-end-engineer-career-path/tracks/fecp-making-a-website-responsive/modules/fecp-challenge-project-company-home-page/projects/company-page-with-flexbox

I’m doing the project in studio code and I’m trying to add a hover effect but its appearing over the links instead of under.

*{

    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body{

    font-family: 'Nunito', sans-serif;
}

h1, h2{

    font-family: 'Iceland', cursive;
}

header{

    height: 100px;
    display: flex;
    justify-content: space-around;
    align-items: center;
}

.icon{

    padding-top: 75px;
}

ul{

    display: flex;
    list-style-type: none;
}

ul li a{

    padding: 0 20px;
    text-decoration: none;
    color: #3a3a3a;
}

li a::after{

    content: "";
    display: block;
    height: 4px;
    width: 0;
    background: #c4c4f7;
    transition:all .5s
}

li a:hover::after{

    width: 100%;
}

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="styles.css">
  <link rel="shortcut icon" href="Strike-icon.png" type="image/x-icon">
  <link href="https://fonts.googleapis.com/css2?family=Nunito&display=swap" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css2?family=Iceland&display=swap" rel="stylesheet">
  <title>Strike</title>
</head>
<body>
  <header>
    <div class="icon">
      <img src="/Flexbox project/Strike-icon.png" alt="Stike works developer and publishing logo">
    </div>
    <nav>
      <ul>
        <li><a href="#"></a>Home</li>
        <li><a href="#"></a>About</li>
        <li><a href="#"></a>Team</li>
      </ul>
    </nav>
  </header>
  <main>
    <div class="content-left">
      <h1>STRIKE</h1>
      <h2>APPLIED TECHNOLOGIES</h2>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsam velit mollitia assumenda esse ullam sit iusto eaque rem nisi nulla odit atque omnis vitae harum aspernatur, totam repellendus? Error, totam?</p>
    </div>
    <div class="content-right">
      <img src="BU5GD6WD618.jpg" alt="cover art for 'Apex'">
      <img src="/Flexbox project/07 - g8vHp7L.jpg" alt=" cover art for 'Bean's World'">
      <img src="/Flexbox project/3eb5a9fec0c2ef0604ab9d98d9b14b9f.jpg" alt="cover art for'The Fruits of Eden'">
    </div>
    <div class="ledaership">
      <img src="/Flexbox project/Executives/39.jpg" alt="CEO/CREATOR: Gradey Robinson JR">
      <img src="/Flexbox project/Executives/123.jpg" alt="Tarik J Grant">
      <img src="/Flexbox project/Executives/454.jpg" alt="Marcus Meriser">
      <img src="/Flexbox project/Executives/633.jpg" alt="Lionel Blaise">
    </div>
  </main>
</body>
</html>

Hello,

One of the reasons why your hover effect is appearing at the top its because it just a block element which doesn’t know exactly where to position itself after.
So Using the position absolute will give you control on its position. I just modified a few things in your css, add the hover effect on your lis intead of your links. Try this :

ul li {

    padding: 0px 20px;
    text-decoration: none;
    color: #3a3a3a;
    
    position: relative;
    
    
}

li::after{

    content: "";
    display: block;
    height: 4px;
    width: 0;
    background: #c4c4f7;
    transition:all .5s;
    position: absolute;
    
    
    
}

li:hover::after{

    width: 60%;
}

Let me know if this works for you.
Happy Coding.

1 Like

hey thanks for responding! so it works a bit better with “Pos:Rel” but the animation disappeared with “Pos:Abo”.

BTW here is where i got the animation from: How to Make a Website Using CSS Flexbox - YouTube

1 Like

I see, so are you satisfied with the result now ?

Hey! so I’ve played around with it a bit and the animation is still appearing on top instead of under. also it does doesn’t activate when i hover the words but only when i touch where the animation is.

ul li {
    padding: 0 20px;
    text-decoration: none;
    color: #3a3a3a;
    position: relative;
}

li a::after{
    content: "";
    display: block;
    height: 4px;
    width: 0;
    background: #c4c4f7;
    transition:all .5s;
}

li a:hover::after{
    width: 100%;
}

Hi, I figured it out ! I was so focused on your CSS that I didn’t realise that you put your menu-items in your lis instead of your links. That’s the reason why its showing on top. Check your nav element compared to mine and you’ll understand.

So your nav should be that way :

    <nav>
      <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Team</a></li>
      </ul>
    </nav>

This should solve your issue, your CSS stays the same you don’t even need to use position rel or absolute.

Here is the CSS for reference :

ul {
  display: flex;
  list-style-type: none; 
}

ul li a {
  
  display: block;
	padding: 0 20px;
  text-decoration: none;
  color: #3a3a3a;
  position: relative;
  display: inline-block;
  cursor: pointer; 
}


li a::after {
  content: '';
  display: block;
  height: 4px;
  width: 0;
  background: #c4c4f7;
  transition: all .5s;
}

li a:hover::after {
  width: 100%;
}

Happy coding !

1 Like

Jesus have mercy lol the things i get stuck on. Thanks a bunch man.

1 Like

No worries man. Cheers !

1 Like

This topic was automatically closed 41 days after the last reply. New replies are no longer allowed.