Simple Css Transition - Nothing Working

I am working on an image with a gradient that disappears on hover. However, I can't get this to transition. I've tried every webkit transition that I know of and it doesn't seem to

Solution 1:

You cannot apply transition on gradient, you may try to add transition on background-size. Use different value of background-size to adjust the way the transtion will work and you can also change the background-position:

.tinted-image {
  -webkit-transition: all .7s ease;
  transition: all .7s ease;
  position: relative;
  width: 100%;
  padding-top: 56.25%;
  /* 16:9 Aspect Ratio */border-radius: 10px;
  background: linear-gradient( rgba(255, 0, 0, 0.6), rgba(237, 240, 0, 0.6)),
  /* image */url(http://calvarygigharbor.com/wp-content/uploads/2018/05/church-softball-2018.jpg);
  background-size:100%100%, contain;
  background-position:center,center; /*OR [left,center] OR [top,center] ...*/background-repeat:no-repeat;
}

.tinted-image:hover {
  -webkit-transition: all .7s ease;
  transition: all .7s ease;
  position: relative;
  width: 100%;
  padding-top: 56.25%;
  /* 16:9 Aspect Ratio */border-radius: 10px;
  background-size:00,contain; /* OR [100% 0,contain] OR [0 100%,contain] */
}

<ahref="http://calvarygigharbor.com/heavenly-hitters/"><divclass="tinted-image"></div></a>