Can you trigger effect from a link outside the <figure class="imghvr"> element?

[bluebloc]

How can you trigger the hover effect from a link outside the

element?

[C-Lodder]

You can probably get away with targetting the next element, like so: https://jsfiddle.net/fmaoe903/

Else you've have to change the hover puesdo class in the effects here: https://github.com/ciar4n/imagehover.css/blob/master/scss/effects/_imghvr-blur.scss#L7 to an actually class which gets appended using Javascript. Something like this:

SCSS:

.imghvr-blur {
    figcaption {
        opacity: 0;
    }
    &.hover {
        > img {
            filter: blur(30px);
            transform: scale(1.2);
            opacity: 0;
        }
        figcaption {
            opacity: 1;
            transition-delay: $transition-duration * 0.6;
        }
    }
}

HTML:

<figure class="imghvr-fade">
  <img src="#">
  <figcaption>
    // Hover Content
  </figcaption>
</figure>

Javascript:

const link = document.getElementById('link');
const figure = document.querySelector('.imghvr-blur');

link.addEventListener('mouseenter', () => {
  figure.classList.add('hover');
});
link.addEventListener('mouseleave', () => {
  figure.classList.remove('hover');
});