Linear Gradient Transition

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)

If you're using Sass, here's a simple mixin you can use: https://stackoverflow.com/a/51238406/321555 — Ricardo Zea, Jul 09 '18 at 04:56

Temani Afif · Accepted Answer · 2018-03-27T18:37:50.967

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>

Thanks , Can you please explain the first snippet please ? I am trying to understand how it works but I can't — Arsalan Khattak, Mar 28 '18 at 02:46
@ArsalanKhattak well it's easy, i used a pseudo-element to create the layer above the image, a pseudo-element is like a common element (div, span) and i simply make it cover the whole area of the current div and used a background color on it similare to the gradient you wanted to apply ... then i simply play with its opacity as a transition on hover — Temani Afif, Mar 28 '18 at 07:45

Linear Gradient Transition

1 Answers1