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
Comments