Linear Gradient Transition - html

Question

I want to add linear Gradient transition on hover.
I did some research and found how it works but unfortunately they work only for buttons etc whereas I want it on an image .
I have added an image using css property background-image . And I want that when user hover the image the image shows linear gradient with transition .
Here is the code .
.project-1 {
background-image: url("https://cdn.pixabay.com/photo/2018/03/11/20/42/mammals-3218028_960_720.jpg");
width: 350px;
height: 250px;
background-position: center;
background-size: cover;
transition: transform 0.5s , opacity 0.5s;
}
.project-1:hover {
background-image: linear-gradient(rgba(0, 0, 0, 0.39) , rgba(0, 0, 0, 0.39)) , url("https://cdn.pixabay.com/photo/2018/03/11/20/42/mammals-3218028_960_720.jpg");
background-position: center;
background-size: cover;
transform: scale(1.05);
}
<div class="project-1"></div>
The topics I found on stackoverflow have buttons or simple background without any image.
(The Image I used in the code is just for snippet)

Answer 1

You cannot apply a fade transition with a linear-gradient like this. An alternative is to use a pseudo-element on where you apply an opacity transition:
.project-1 {
background-image: url("https://cdn.pixabay.com/photo/2018/03/11/20/42/mammals-3218028_960_720.jpg");
width: 350px;
height: 250px;
background-position: center;
background-size: cover;
transition: transform 0.5s, opacity 0.5s;
}
.project-1:before {
content: "";
position: absolute;
top: 0;
right: 0;
left: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.39);
transition: 0.5s;
opacity: 0;
}
.project-1:hover {
transform: scale(1.05);
}
.project-1:hover::before {
opacity: 1;
}
<div class="project-1"></div>
Or you can have another kind of transition with the gradient by playing with background-size or background-position. Here is an example:
.project-1 {
background-image:
linear-gradient(rgba(0, 0, 0, 0.39) , rgba(0, 0, 0, 0.39)) , url("https://cdn.pixabay.com/photo/2018/03/11/20/42/mammals-3218028_960_720.jpg");
width: 350px;
height: 250px;
background-position:0 0,center;
background-size:100% 0%,cover;
background-repeat:no-repeat;
transition: 0.5s;
}
.project-1:hover {
background-image:
linear-gradient(rgba(0, 0, 0, 0.39) , rgba(0, 0, 0, 0.39)) , url("https://cdn.pixabay.com/photo/2018/03/11/20/42/mammals-3218028_960_720.jpg");
background-size:100% 100% ,cover;
transform: scale(1.05);
}
<div class="project-1"></div>