How to put a gradient on an image in CSS that is not in the background?-CodePudding

I am trying to put gradient on an image that is not loaded from the background. in all the examples I've seen, they load the image from the background and do the gradient, but in my case I don't want to have the background image, and when I add the gradient it doesn't do anything. I show you the HTML code:

<section >
                    <h1>Nuevos destinos que descubrir</h1>
                    <ul >
                        <li >
                            <figure>
                            <a href="#"><img src="/img/oporto.jpg" alt="imagen1"></a>
                            </figure>
                                <div>
                                    <h3>Oporto</h3>
                                </div>
                        </li>

and this is what i tried but it doesn't work:

.picture_list_first img {
    width: 330px;
    height: 332px;
    border-radius: 5px;
    margin: 0px -20px 0px -30px;
    background: rgb(0,0,0);
    background: linear-gradient(0deg, rgba(0,0,0,1) 0%, rgba(255,255,255,1) 100%);
}

Thank you all.

CodePudding user response：

the issue with your code is you are adding a background gradient then covering it up with an image so you cant see the gradient any more.

Im not entirely sure what your aim is however if you want to add a semi transparent gradient to your image, you can do that by adding another element on top of your image and style that with the background property.

it seems this question was already answered here: How to add a gradient/filter in the image in CSS

CodePudding user response：

You can simply add the background to the parent element (div/anchor/whatever) and then make the image semi transparent. See the snippet below -- hover to see the difference

.gradient-img {
  background: rgb(131,58,180);
  background: linear-gradient(90deg, rgba(131,58,180,1) 0%, rgba(253,29,29,1) 50%, rgba(252,176,69,1) 100%);
  
  display: flex;
}
.gradient-img img {
  opacity: 0.5;
  width: 100%;
  transition: opacity 500ms 0ms ease-in-out;
}
.gradient-img img:hover { opacity: 1 }

<div ><img src="https://picsum.photos/200"></div>