greyscale logo hover effect

by | Mar 27, 2019 | Header | 0 comments

How to Create a Grayscale to Color Logo Hover Effect

.friend-logo {
    filter: grayscale(100%);
    -webkit-filter: grayscale(100%);
    opacity: .6;
    -webkit-transition: .6s;
    -moz-transition: .6s;
    transition: .6s;
}
 
.friend-logo:hover {
    filter: grayscale(0%);
    opacity: 1;
    margin-top: -5px;
    box-shadow: 0px 18px 22px -15px rgba(0,0,0,0.3);
}

Submit a Comment

Your email address will not be published. Required fields are marked *