Mobile First solution

Without javascript, it might look something like this:

body .card .card-image a .filter {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    border-radius: 0.66em;
    background: url(../images/icon-view.svg) no-repeat center rgba(0, 255, 247, 0.5);
    visibility: hidden;
    opacity: 0;
    transition: visibility 0.3s, opacity 0.3s;
}

body .card .card-image a {
    position: relative;
    display: block;
}

body .card .card-image a img {
    border-radius: 0.66em;
    position: relative;
    max-width: 100%;
    display: block;
}

body .card .card-image a:hover .filter,
body .card .card-image a:focus .filter,
body .card .card-image a:focus-visible .filter {
    visibility: visible;
    opacity: 1;
}

With the above bit of css, you shouldn't need javascript to calculate the height of .filter. Hope that works for you! 👍