Transition on hover not working?

1

For some reason google is not helping me out here as I have a project with nearly the same thing and here it does not work.

.github-icon, .linkedin-icon {
  padding: 0 15px;
  transition: .3s ease-in-out;
}

.github-icon:hover, .linkedin-icon:hover {
  cursor: pointer;
  color: gold;
}

The transition just doesn’t happen.

2

Without the full code or a live site, it’s almost impossible to help.

This is on the portfolio site, right? I looked at the page and you have a transition in the .MuiSvgIcon-root class selector which would overwrite any transition on the .github-icon, .linkedin-icon selector.

/* In a style element on the page */
.MuiSvgIcon-root {
  fill: currentColor;
  width: 1em;
  height: 1em;
  display: inline-block;
  font-size: 1.5rem;
  transition: fill 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
  flex-shrink: 0;
  user-select: none;
}

/* In Contact.css */
.github-icon, .linkedin-icon {
  padding: 0 15px;
  /* overwritten */
  transition: .3s ease-in-out;
}
1 Like
3

Thanks for this. I feel like I live on this site :stuck_out_tongue:

4

No problem. I like your landing section BTW, looks cool.

5

Thanks a lot :slight_smile: Now to work on the rest of it haha