change color of background when hover image

Question

I need to change color when my image on hover.

I have div with img inside, so when I hover my image I change opacity to 0.3 but the color is white and I wanna change it to green, is it possible??

<div class="col-md-4 col-sm-6" style="padding: 0px !important;width:50px;height: 350px">  
              <img class="img-fluid " id="myImg" src="img1.png" alt="" style="width:100%;height: 100%">
          </div>
#myImg{
  cursor: pointer;
  transition: 0.3s;
}
#myImg:hover,{
  opacity: 0.3;}

this is what I need to have

this what I am able to do

So set the background color? Does setting it to green not do what you want? — epascarello
– epascarello, Commented Sep 17, 2020 at 14:19
You must add an overlay div next to image, set its position to absolute and change its color and etc on hover. — AbbasEbadian
– AbbasEbadian, Commented Sep 17, 2020 at 14:19

SeeoX · Accepted Answer · 2020-09-17 14:43:37Z

1

The white that you are seeing is from the background's white. Instead, what you probably want to do here is to change the opacity and color of the div rather than of the img like so:

CSS

.demo{
  background-color: green;
}

#myImg:hover{
  opacity: 0.3;
}

HTML

<div class="demo col-md-4 col-sm-6" style="padding: 0px !important;width:50px;height: 350px">  
    <img class="img-fluid " id="myImg" src="https://picsum.photos/50/350" alt="" style="width:100%;height: 100%">
</div>

edited Sep 17, 2020 at 14:43

SeeoX

6024 silver badges19 bronze badges

answered Sep 17, 2020 at 14:22

Shiverz

6881 gold badge10 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

SeeoX Over a year ago

May be more change the opacity of the img and have the background-color of div green. I don't think we want the opacity to be apply on the background-color.

Shiverz Over a year ago

Yes, I realized that as I re-read my answer. I was making the edit as you commented this.

Collectives™ on Stack Overflow

change color of background when hover image

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related