/* 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>
Preview:
downloadDownload PNG
downloadDownload JPEG
downloadDownload SVG
Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!
Click to optimize width for Twitter