CODEWITHSUNDEEP
htmlcsscss-selectorshovercss-animations
Will
Will

Reputation: 97

Unable to get the CSS hover animation to work

I am trying to create a hover state for these buttons using the transform and transition, but it won't work. Is it because I already have an animation for the buttons to appear? Am I not selecting the element properly. What am I doing wrong? 

.hero-content {
  text-align: center;
  margin: 20% auto;
}

.hero-content li {
  display: inline-block;
}

.hero-content a {
  display: block;
  width: 200px;
  background-color: red;
  margin-right: 20px;
  text-align: center;
  border-radius: 5px;
  transition: .5s;
}

.hero-content a {
  text-decoration: none;
}

.hero-content span {
  display: inline-block;
  margin: 40% 0;
  font-family: Sans-Serif;
  font-size: 1.3em;
  font-weight: 900;
  color: #fff;
}

.feat-btn {
  animation-name: feat-fly;
  animation-duration: 1s;
  animation-fill-mode: both;
  animation-timing-function: cubic-bezier(0, 0, .19, 1);
}

.box-one {
  animation-delay: 1s;
}

.box-two {
  animation-delay: 1.25s;
}

.box-three {
  animation-delay: 1.5s;
}

.box-four {
  animation-delay: 1.75s;
}

@keyframes feat-fly {
  from {
    transform: translateY(800px)
  }
  to {
    transform: translateY(0)
  }
}

.hero-content a:hover {
  transform: translateY(-20px);
}
<ul class="hero-content">
  <li>
    <a href="#" class="feat-btn box-one">
      <span>Web &amp; App</span>
    </a>
  </li>
  <li>
    <a href="#" class="feat-btn box-two">
      <span>Design</span>
    </a>
  </li>
  <li>
    <a href="#" class="feat-btn box-three">
      <span>Film &amp; Video</span>
    </a>
  </li>
  <li>
    <a href="#" class="feat-btn box-four">
      <span>Marketing</span>
    </a>
  </li>
</ul>

Maybe I can even clean up my CSS a little. I am not sure probably not. I would rather keep most of it the same and still be able to fix the problem I am facing but any suggestions are welcome but I do mostly want to resolve the hove problem that I described above.

Thank you in advance!

Upvotes: 0

Views: 75

Answers (2)

Twinkle Sharma
Twinkle Sharma

Reputation: 380

If you want to hover on the text then add hover on span where the text is. And if you want to add hover to the red box then give hover CSS to .hero-content li: hover . Also, I have added a transition for smoothness. Let me know in comments if there is a query.

.hero-content {
  text-align: center;
  margin: 20% auto;
}

.hero-content li {
  display: inline-block;
  margin-bottom:20px;
}

.hero-content a {
  display: block;
  width: 200px;
  background-color: red;
  margin-right: 20px;
  text-align: center;
  border-radius: 5px;
  transition:.5s;
}

.hero-content a {
  text-decoration: none;
}

.hero-content span {
 display: inline-block;
 margin: 40% 0;
 font-family: Sans-Serif; 
 font-size: 1.3em;
 font-weight: 900; 
 color: #fff;
 transition: all 0.3s ease;

}

.feat-btn {
  animation-name: feat-fly;
  animation-duration: 1s;
  animation-fill-mode: both;
  animation-timing-function: cubic-bezier(0,0,.19,1);

}

.box-one {
  animation-delay: 1s;
}

.box-two {
  animation-delay: 1.25s;
}

.box-three {
  animation-delay: 1.5s;
}

.box-four {
  animation-delay: 1.75s;
}

@keyframes feat-fly {
  from{ transform: translateY(800px)}
  to{ transform: translateY(0)}
}

.hero-content a span:hover {
  transform: translateY(-20px);
  transition: all 0.3s ease;

}
<ul class="hero-content">
      <li><a href="#" class="feat-btn box-one">
     <span>Web &amp; App</span>
    </a></li>
      <li><a href="#" class="feat-btn box-two">
      <span>Design</span>
    </a></li>
      <li><a href="#" class="feat-btn box-three">
      <span>Film &amp; Video</span> 
    </a></li>
      <li><a href="#" class="feat-btn box-four">
      <span>Marketing</span>
    </a></li>
    </ul>

Upvotes: 1

akhtarvahid
akhtarvahid

Reputation: 9779

Are you looking for this?

.hero-content {
  text-align: center;
  margin: 20% auto;
}

.hero-content li {
  display: inline-block;
}

.hero-content a {
  display: block;
  width: 200px;
  background-color: red;
  margin-right: 20px;
  text-align: center;
  border-radius: 5px;
  transition:.5s;
}

.hero-content a {
  text-decoration: none;
}

.hero-content span {
 display: inline-block;
 margin: 40% 0;
 font-family: Sans-Serif; 
 font-size: 1.3em;
 font-weight: 900; 
 color: #fff;

}

.feat-btn {
  animation-name: feat-fly;
  animation-duration: 1s;
  animation-fill-mode: both;
  animation-timing-function: cubic-bezier(0,0,.19,1);

}

.box-one {
  animation-delay: 1s;
}

.box-two {
  animation-delay: 1.25s;
}

.box-three {
  animation-delay: 1.5s;
}

.box-four {
  animation-delay: 1.75s;
}

@keyframes feat-fly {
  from{ transform: translateY(800px)}
  to{ transform: translateY(0)}
}

.hero-content li:hover {
  transform: translateY(-20px);
  transition: 1s;
}
<ul class="hero-content">
      <li><a href="#" class="feat-btn box-one">
     <span>Web &amp; App</span>
    </a></li>
      <li><a href="#" class="feat-btn box-two">
      <span>Design</span>
    </a></li>
      <li><a href="#" class="feat-btn box-three">
      <span>Film &amp; Video</span> 
    </a></li>
      <li><a href="#" class="feat-btn box-four">
      <span>Marketing</span>
    </a></li>
    </ul>

Upvotes: 1

Related Questions