Zoom Portfolio Image with Black Background on Hover

Description

• portfolio title with subtext, on hover, zoom out portfolio image, add colored background, change title/subtext color
• view demo – password: abc
• buy me a coffee

(initial)

(hover)

#1. Install Code

#1.1. First, hover on each Portfolio item > Click Settings

#1.2. Next, click SEO > at SEO Description > enter desired subtext

#1.3. Next, click Gear icon on Portfolio Page

#1.4. Click Advanced > Paste this code

<!-- 09.26c12v10 Zoom Portfolio Image with Black Background on Hover -->
<script>
window.ZoomPortfolioConfig = {
    gridSelector: '.portfolio-grid-basic',
    bgInitial: 'transparent',
    bgHover: '#000000',
    borderRadius: '16px',
    textHoverColor: '#ffffff',
    textMarginTop: '10px',
    hoverSpace: '30px',
    transitionSpeed: '0.4s'
};
</script>
<script>
document.addEventListener('DOMContentLoaded', () => {
    const config = window.ZoomPortfolioConfig;
    const css = `
        ${config.gridSelector} .grid-item {
            background-color: ${config.bgInitial} !important;
            border-radius: ${config.borderRadius} !important;
            transition: background-color ${config.transitionSpeed} ease, padding ${config.transitionSpeed} ease !important;
            padding: 0 0 12px 0 !important;
            box-sizing: border-box !important;
            display: block !important;
        }
        ${config.gridSelector} .grid-item:hover {
            background-color: ${config.bgHover} !important;
            padding: ${config.hoverSpace} !important;
        }
        ${config.gridSelector} .grid-image {
            border-radius: ${config.borderRadius} !important;
            overflow: hidden;
            margin: 0 !important;
        }
        ${config.gridSelector} .portfolio-text {
            display: flex !important;
            justify-content: space-between !important;
            align-items: baseline !important;
            margin-top: ${config.textMarginTop} !important;
            padding: 0 !important;
            transition: color ${config.transitionSpeed} ease !important;
        }
        ${config.gridSelector} .grid-item:hover .portfolio-title,
        ${config.gridSelector} .grid-item:hover .portfolio-desc {
            color: ${config.textHoverColor} !important;
        }
        ${config.gridSelector} .portfolio-desc {
            font-size: 1rem;
            opacity: 0.85;
            text-align: right;
            margin-left: 20px;
            font-weight: normal;
            transition: color ${config.transitionSpeed} ease !important;
        }
    `;

    const style = document.createElement('style');
    style.textContent = css;
    document.head.appendChild(style);

    const gridItems = document.querySelectorAll(`${config.gridSelector} .grid-item`);
    gridItems.forEach(item => {
        let url = item.getAttribute('href');
        if (!url) return;
        
        const jsonUrl = url.includes('?') ? `${url}&format=json` : `${url}?format=json`;

        fetch(jsonUrl)
            .then(response => {
                if (!response.ok) throw new Error();
                return response.json();
            })
            .then(data => {
                let seoDescription = '';
                if (data?.item?.seoData?.seoDescription) {
                    seoDescription = data.item.seoData.seoDescription;
                } else if (data?.seoData?.seoDescription) {
                    seoDescription = data.seoData.seoDescription;
                }

                if (seoDescription) {
                    const textContainer = item.querySelector('.portfolio-text');
                    if (textContainer) {
                        const descElement = document.createElement('span');
                        descElement.className = 'portfolio-desc';
                        descElement.textContent = seoDescription;
                        textContainer.appendChild(descElement);
                    }
                }
            })
            .catch(() => {});
    });
});
</script>

#2. Customize

#2.1. You can change all style in line 05 – line 10

bgInitial: 'transparent',
    bgHover: '#000000',
    borderRadius: '16px',
    textHoverColor: '#ffffff',
    textMarginTop: '10px',
    hoverSpace: '30px',