icon not showing on hover using sass

I am using scss and trying to hide an icon and when I hover the button I want the icon to display. I also want to animate it so I can't use display:none as I believe you can't animate that. So I have tried to use opacity and visibility.

I have 2 problems. Firstly, The text in the button is not centered because the icon is there in an invisible state yet when you go to dev tools you can still see it there. Secondly, the icon does not appear on hover.

.btn {
  text-transform: uppercase;
  text-decoration: none;
  padding: 1.5rem 4rem;
  display: inline-block;
  font-size: 1.6rem;
  box-shadow: 0 1rem 2rem rgba($color-black, .2);
  &--primary {
    background-color: $color-primary;
    color: $color-white;
    transition: all .2s;
    &__icon {
      visibility: hidden;
      opacity: 0;
    }
    &:hover {
      transform: translateY(-2px);
      &__icon {
        visibility: visible;
        opacity: 1;
      }
    }
  }
}

Open in new window


<a href="#" class="btn btn--primary">Discover More <i class="btn--primary__icon icon-basic-clockwise"></i></a>

Open in new window

LVL 1
Black SulfurAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Chris StanyonWebDevCommented:
If you look at the CSS that's generated, you'll end up with this:

.btn--primary:hover__icon {
    visibility: visible;
    opacity: 1;
}

Open in new window

which is clearly wrong. What you actually need is:

.btn--primary:hover .btn--primary__icon {
    visibility: visible;
    opacity: 1;
}

Open in new window

Have a look at this:

.btn {
    text-transform: uppercase;
    text-decoration: none;
    padding: 1.5rem 4rem;
    display: inline-block;
    font-size: 1.6rem;
    box-shadow: 0 1rem 2rem rgba($color-black, .2);

    &--primary {
        background-color: $color-primary;
        color: $color-white;
        transition: all .2s;
        
        &__icon {
            visibility: hidden;
            opacity: 0;          
        }

        $this: &;

        &:hover {
            transform: translateY(-2px);

            #{$this}__icon {
                visibility: visible;
                opacity: 1;
            }
        }
    }
}

Open in new window

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Black SulfurAuthor Commented:
Hey Chris, long time no speak! That works great, thanks so much. yeah, I looked at the compiled css and also saw that dodgy syntax there. It's working now. Cheers! :)
Chris StanyonWebDevCommented:
Good stuff :)
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.