Coloured caption on hover for single image

You can set this on the image ALB Element itself – if you choose to show the caption only on hover : It is the caption tab to decide:
click to enlarge

by the way : if you like to set up a different timing on that ( 4sec is too long but you will better see the effect) – put this to your quick css:

.av-overlay-on-hover .avia-image-container-inner .av-image-caption-overlay { transition: opacity 4s ease }
.av-overlay-on-hover .avia-image-container-inner:hover .av-image-caption-overlay { transition: opacity 4s ease }

it is as said above a matter of opacity setting.
PPS: you can leave the caption text field empty – if you only like to have color

yes indeed you didn’t explain it right – you got a grid-row and link not from the image but from the grid-cell.
This is only an opacity thing and no overlay ! It is styled from grid-row.css:

body .flex_cell.avia-link-column.avia-link-column-hover:hover {
    opacity: 0.8;
}

The link you gave on Top is something totaly different.

This is perhaps a good alternative for you to show that it is an active linking:

body .flex_cell.avia-link-column.avia-link-column-hover {
    opacity: 1 !important;
    -webkit-filter: grayscale(100%);
    filter: grayscale(100%);
}

body .flex_cell.avia-link-column.avia-link-column-hover:hover {
    opacity: 1 !important;
    -webkit-filter: grayscale(0);
    filter: grayscale(0);
}

on hovering you get the colored Images – or the other way round have colored images – and on hovering do some filter functions.

best would be to have a custom-class on the grid-row to be specific on that f.e. : with-colored-overlay

to have the possibility to change the hover color for each cell you can do that:

.with-colored-overlay .avia-image-overlay-wrap:after {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  transition: opacity 0.5s ease
}

.with-colored-overlay .avia-image-overlay-wrap:hover:after {
  opacity: 0.6;
  transition: opacity 0.5s ease
}

.with-colored-overlay .flex_cell:nth-of-type(1) .avia-image-overlay-wrap:after {
  background: red;
}
.with-colored-overlay .flex_cell:nth-of-type(2) .avia-image-overlay-wrap:after {
  background: blue;
}
.with-colored-overlay .flex_cell:nth-of-type(3) .avia-image-overlay-wrap:after {
  background: green;
}
.with-colored-overlay .flex_cell:nth-of-type(4) .avia-image-overlay-wrap:after {
  background: gold;
}
.with-colored-overlay .flex_cell:nth-of-type(5) .avia-image-overlay-wrap:after {
  background: yellow;
}

without the transitions the effect is ok too – just get rid of both lines

see example page: https://webers-testseite.de/grid-row-background-image/

yes – but now you have two opacities working on hovering. To see the effect better it would be nicer i think if you get rid of the other hover effect.