Animating linear gradient ends with transparent color using CSS

Question

I need help to make animation like linear gradient using CSS that ends with transparent color on image..

This is an example (if Possible):

Answer 1

Current effect achieved by creating linear gradient transparent-white-transparent and moving background forward/back on :hover.

here's solution for placing image under this animation. but please keep in mind endless animation might be very distractive and annoying for your users

.wrapper {
  position: relative;
  width: 350px;
  height: 150px;
  /*border: 2px solid #444;*/
  border-radius: 10px;
  overflow: hidden;
}

img {
  position: relative;
  z-index: 0;
  width: 100%;
}

.gradient {
  transition: background-position .5s;
  background-size: 200% auto;
  box-shadow: 0 0 20px #eee;
  font: 0;
  position: absolute;
  z-index: 1;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
}

.gradient {
  background-image: linear-gradient(to top, transparent 0%, white 51%, transparent 100%);
  background-position: center bottom;
}

.gradient:hover {
  background-position: center top;
}

.gradient.animated {
  animation: gradient 2s infinite;
}

@keyframes gradient {
  0% {
    background-position: center bottom;
  }
  50% {
    background-position: center top;
  }
  100% {
    background-position: center bottom;
  }
}

<div class='wrapper'>
  <div href='#' class='gradient'></div>
  <img src='http://lorempixel.com/350/150/sports/' />
</div>

<div class='wrapper'>
  <div href='#' class='gradient animated'></div>
  <img src='http://lorempixel.com/350/150/sports/' />
</div>

and simplier example for better understanding

you can find more in article below

w3schools about CSS3 Gradients

.gradiented {
  transition: background-position .5s;
  background-size: 200% auto;
  box-shadow: 0 0 20px #eee;
  border-radius: 10px;
  width: 200px;
  height: 200px; 
}

.gradiented {
  background-image: linear-gradient(to top, #283048 0%, #859398 51%, #283048 100%);
  background-position: center bottom;
}

.gradiented:hover {
  background-position: center top;
}

<div href='#' class='gradiented'></div>