const photos = document.querySelectorAll('.photo'); function enlargeImg(element) { const imgElement = element.querySelector('img'); const portfolioText = element.querySelector('.portfolio-text'); imgElement.classList.add('enlarged'); portfolioText.style.display = 'none'; } function resetImg(element) { const imgElement = element.querySelector('img'); const portfolioText = element.querySelector('.portfolio-text'); imgElement.classList.remove('enlarged'); portfolioText.style.display = 'block'; } photos.forEach(photo => { photo.addEventListener('click', () => { enlargeImg(photo); }); document.addEventListener('click', event => { if (!photo.contains(event.target)) { resetImg(photo); } }); });
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