Dark background opacity on hover

Question

I have this CSS. When you hover the image background turns a white opacity, but I'd like it to turn a dark opacity. I tried adding a dark background color but nothing.

.img-container .img-item a.image:hover img {
   opacity: .2;
   filter: alpha(opacity=50);
   background-color: rgba(0, 0, 0, 0.5);
   transition: all 1s;
   -webkit-transition: all 1s;
    }

Maybe this help someone, darken an image https://stackoverflow.com/a/15765969/4573839 — yu yang Jian, Jul 16 '18 at 14:00

score 8 · Accepted Answer · edited Dec 23 '15 at 15:55

8

Put your img in a div with bg color dark and opacity 0.5 And give z-index for the div a bigger value than for img.

#imgcontainer
{
opacity:0.5;
background-color: Black;
z-index:10;
}
#imgcontainer img
{
      Z-index: 5;
}

edited Dec 23 '15 at 15:55

androidlover

122
1
10

answered Jan 08 '15 at 19:00

Adam Cherti

962
1
8
21

I did that. it's good, but the images are all different widths and heights and responsive so they get large as you resize the browser but then the container div on hover it creates bars http://screencast.com/t/GzN1owzT9 is there a workaround? – Omar Jan 08 '15 at 22:38
I solved this problem by adding a max-width to the container so it stays the same width of the image on resize of browser. Worked. Accepted answer. Awesome! – Omar Jan 08 '15 at 22:52
Can you create a jsfiddle for future references? – Karina Kozarova Aug 16 '17 at 09:22

score 0 · Answer 2 · answered Jan 08 '15 at 18:58

0

you can't add background to an image, instead, you can add background-color at parent element.

answered Jan 08 '15 at 18:58

user3632930

311
2
8

Dark background opacity on hover

2 Answers2