Change opacity color on hover

Question

I have an image grid on my webpage and I wanted to change the opacity color when I hover on the image so what I did was:

figure.snip0016:hover img {
  background: (0, 235, 125, 0.3);
}

But it didn't work.

Currently when you add the opacity property, it works fine, but I wanted it to be orange-ish or something when you hover on it.

Here is the entire code:

    @import url('https://fonts.googleapis.com/css?family=Karla&display=swap');

    figure.snip0016 {
      font-family: 'Karla', sans-serif;
      color: #fff;
      position: relative;
      overflow: hidden;
      max-width: 100%;
      width: 100%;
      background: #000000;
      text-align: left;
    }
    figure.snip0016 * {
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
    }
    figure.snip0016 img {
      max-width: 100%;
      opacity: 1;
      width: 100%;
      -webkit-transition: opacity 0.35s;
      transition: opacity 0.35s;
    }
    figure.snip0016 figcaption {
      position: absolute;
      bottom: 0;
      left: 0;
      padding: 60px 3em;
      width: 100%;
      height: 100%;
    }
    figure.snip0016 figcaption::before {
      position: absolute;
      top: 30px;
      right: 30px;
      bottom: 30px;
      left: 100%;
      border-left: 4px solid rgba(255, 255, 255, 0.8);
      content: '';
      opacity: 0;
      background-color: rgba(255, 255, 255, 0.5);
      -webkit-transition: all 0.5s;
      transition: all 0.5s;
      -webkit-transition-delay: 0.6s;
      transition-delay: 0.6s;
    }
    figure.snip0016 h2,
    figure.snip0016 p {
      margin: 0 0 5px;
      opacity: 0;
      -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
      transition: opacity 0.35s,-webkit-transform 0.35s,-moz-transform 0.35s,-o-transform 0.35s,transform 0.35s;
    }
    figure.snip0016 h2 {
      word-spacing: -0.15em;
      font-weight: 300;
      text-transform: ;
      -webkit-transform: translate3d(30%, 0%, 0);
      transform: translate3d(30%, 0%, 0);
      -webkit-transition-delay: 0.3s;
      transition-delay: 0.3s;
    }
    figure.snip0016 h2 span {
      font-weight: bold;
    }
    figure.snip0016 p {
      font-weight: 200;
      -webkit-transform: translate3d(0%, 30%, 0);
      transform: translate3d(0%, 30%, 0);
      -webkit-transition-delay: 0s;
      transition-delay: 0s;
      line-height: 20px;
    }
    figure.snip0016 a {
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      position: absolute;
      color: #ffffff;
    }
    figure.snip0016:hover img {
      opacity: 0.2;
    }
    figure.snip0016:hover figcaption h2 {
      opacity: 1;
      -webkit-transform: translate3d(0%, 0%, 0);
      transform: translate3d(0%, 0%, 0);
      -webkit-transition-delay: 0.4s;
      transition-delay: 0.4s;
    }
    figure.snip0016:hover figcaption p {
      opacity: 0.9;
      -webkit-transform: translate3d(0%, 0%, 0);
      transform: translate3d(0%, 0%, 0);
      -webkit-transition-delay: 0.6s;
      transition-delay: 0.6s;
    }
    figure.snip0016:hover figcaption::before {
      background: rgba(255, 255, 255, 0);
      left: 30px;
      opacity: 1;
      -webkit-transition-delay: 0s;
      transition-delay: 0s;
    }

    <div class="portfolio leadership popupTrigger" data-cat="leadership" data-popup-id="">
                      <div class="portfolio-wrapper">
                        <figure class="snip0016">
                          <img alt="" src="https://via.placeholder.com/180">
                          <figcaption class="hideForMobile hideForPhone hideForTablet">
                            <h2 style="font-size: 20px;">Chris<br>
                            <strong style="color: #EF4D26; font-size: 20px;">Saura</strong></h2>
                            <p style="font-size: 2vh">Team Manager</p>
                          </figcaption>
                        </figure>
                      </div>
                    </div>

Answer 1

"Can not give background color to an image."

You can give some padding to your Image to see the background color, because you are using background color for your image [on hover]. Add some padding too and see the result as you wanted.

figure.snip0016:hover img {
      background: rgba(0, 235, 125, 0.3);
      padding:15px;
    }

Or you can give background color to the outer area of image:

figure.snip0016:hover{
      background: rgba(0, 235, 125, 0.3);
    }

I hope you get the idea

Answer 2

take it as example:

.snip0016 {
  height: 4rem;
  width: 4rem;
  border: 1 solid #000;
  background-color: tomato;
}
.snip0016:hover {
  background-color: rgba(0, 235, 125, 0.3);
}

<div class="snip0016">
</div>