CSS button image Hover effect - B&W to Color

Question

#fb-button {   
            background-image: url('http://gxm.ece.myftpupload.com/wp-content/uploads/2021/10/18-181292_facebook-5-star-reviews-hd-png-download__1_-removebg-preview.png');
    width: 480px;
    height: 200px;
    border: none;
    background-color: #a52a2a00;
    background-size: cover;
    background-position: center center;
    cursor: pointer;
    filter: none;
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    cursor: pointer;
    transition: all 300ms ease;

}


/* the problem is here, just a space, between #fb-button and :hover. See the Spaceholder's answer in this post. */
#fb-button :hover{
    filter: none;
    -webkit-filter: grayscale(0%);
    -moz-filter: grayscale(0%);
    -ms-filter: grayscale(0%);
    -o-filter: grayscale(0%);
    width: 485px;
    height: 205px;
}

<div id="fb-button">
  <div class="et_pb_code_inner">
    <button id="fb-button" onclick="myFbFunction()"></button>
  </div>
</div>

<div id="fb-review" class="et_pb_module">
  <div class="et_pb_code_inner">
    <!-- this is the fb review source code for the review template -->
    <script src="https://apps.elfsight.com/p/platform.js" defer></script>
    <div class="elfsight-app-f24ab324-722d-40af-b413-b052f62fdc99"></div>

    <script>
      function myFbFunction() {
        var x = document.getElementById('fb-review');
        if (x.style.display === 'block') {
          x.style.display = 'none';
        } else {
          x.style.display = 'block';
        }
      }
    </script>
  </div>
</div>

I tried to - Facebook button and the google button could be in black white as normal. But when someone hovers over these buttons, then the buttons will transform in color.

Here is the website link: https://gxm.ece.myftpupload.com/home/

This is my code. But it's not working. Can anyone assist me to find out the problem?

#fb-button {   
            background-image: url('http://gxm.ece.myftpupload.com/wp-content/uploads/2021/10/18-181292_facebook-5-star-reviews-hd-png-download__1_-removebg-preview.png');
    width: 480px;
    height: 200px;
    border: none;
    background-color: #a52a2a00;
    background-size: cover;
    background-position: center center;
    cursor: pointer;
    filter: none;
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    cursor: pointer;
    transition: all 300ms ease;

}

#fb-button :hover{
    filter: none;
    -webkit-filter: grayscale(0%);
    -moz-filter: grayscale(0%);
    -ms-filter: grayscale(0%);
    -o-filter: grayscale(0%);
    width: 485px;
    height: 205px;
}

#gl-button {   
            background-image: url('http://gxm.ece.myftpupload.com/wp-content/uploads/2021/10/download__3_-removebg-preview.png');
    width: 480px;
    height: 200px;
    border: none;
    background-color: #a52a2a00;
    background-size: cover;
    background-position: center center;
    cursor: pointer;
    filter: none;
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    cursor: pointer;
    transition: all 300ms ease;    
}

#gl-button :hover{
    filter: none;
    -webkit-filter: grayscale(0%);
    -moz-filter: grayscale(0%);
    -ms-filter: grayscale(0%);
    -o-filter: grayscale(0%);
    width: 485px;
    height: 205px;
}

#fb-review, #gl-review {
    display: none;
}

Hi ! We all hope that your site will stay online forever, but please make a snippet `<>` in your question, with the relevant html code that reproduces your issue. — Philippe, Oct 05 '21 at 17:39

score 0 · Accepted Answer · answered Oct 05 '21 at 18:05

0

All you have to do is remove spaces

#gl-button :hover into #gl-button:hover

and

#fb-button :hover into #fb-button:hover

answered Oct 05 '21 at 18:05

spaceholder

131
1
2
9

CSS button image Hover effect - B&W to Color

1 Answers1