Issue
I'm trying to change the color of the X logo on hover. The logo is added to html as an image with the csv in src. I've tried to do it as a mask like suggested in another thread, but my logo disappears.
#xLogo {
width: 18px;
margin-right: .25rem;
}
a {
text-decoration: underline;
color: #282624;
overflow-wrap: break-word;
word-wrap: break-word;
}
a:hover,
a:focus,
a:active {
color: #FD5A3B;
text-decoration: none;
}
a:hover > #xLogo,
a:focus > #xLogo,
a:active > #xLogo {
background-color: #FD5A3B;
-webkit-mask: url(../img/X_logo.svg) no-repeat center;
mask: url(../img/X_logo.svg) no-repeat center;
}
How to make it happen?
Solution
You can use filter
property.
a:hover > #xLogo,
a:focus > #xLogo,
a:active > #xLogo {
filter: invert(21%) sepia(100%) saturate(7414%) hue-rotate(359deg) brightness(94%) contrast(117%);
}
Answered By - Kodd
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.