悬停时更改不透明度颜色

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>