image with title on hover js

Sun Feb 13 2022 04:21:11 GMT+0000 (UTC)

Saved by @developerchef #html #css #javascript

/* Demo purposes only */
var snippet = [].slice.call(document.querySelectorAll('.hover'));
if (snippet.length) {
  snippet.forEach(function (snippet) {
    snippet.addEventListener('mouseout', function (event) {
      if (event.target.parentNode.tagName === 'figure') {
        event.target.parentNode.classList.remove('hover')
      } else {
        event.target.parentNode.classList.remove('hover')
      }
    });
  });
}
<figure class="snip1585">
  <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/sample70.jpg" alt="sample70" />
  <figcaption>
    <h3>Ingredia <span>Nutrisha</span></h3>
  </figcaption>
  <a href="#"></a>
</figure>
<figure class="snip1585 hover"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/sample106.jpg" alt="sample106" />
  <figcaption>
    <h3>Dianne <span>Ameter</span></h3>
  </figcaption>
  <a href="#"></a>
</figure>
<figure class="snip1585"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/sample109.jpg" alt="sample109" />
  <figcaption>
    <h3>Samuel <span>Serif</span></h3>
  </figcaption>
  <a href="#"></a>
</figure>



content_copyCOPY