Image Block Flip Effect

by

To add Flip effect on Image Block, you can do these.

#1. First, add text to ALT

#2. Next, add ## to end of ALT

#3. Use this code to Page Header Injection (page where you use Image Blocks)

<!-- Image to Flip - @tuanphan - contact [email protected] if you need support -->
<script>document.addEventListener('DOMContentLoaded',function(){const imageBlocks=document.querySelectorAll('.sqs-block-image');imageBlocks.forEach(block=>{const img=block.querySelector('img[data-sqsp-image-block-image]');if(!img)return;const altText=img.alt||'';if(!altText.includes('##'))return;const imgSrc=img.src;const description=altText.replace('##','').trim();const flipCard=document.createElement('section');flipCard.className='tp-card';flipCard.innerHTML=`<div class="tp-inner"><div class="tp-front"><img src="${imgSrc}" alt="${description}"></div><div class="tp-back"><div class="tp-content"><p class="tp-text">${description}</p></div></div></div>`;block.parentNode.replaceChild(flipCard,block)});const style=document.createElement('style');style.textContent=`.tp-card{width:min(100%,720px);margin:24px auto;perspective:1000px}.tp-inner{position:relative;width:100%;aspect-ratio:16/9;transform-style:preserve-3d;transition:transform .6s}.tp-card:hover .tp-inner{transform:rotateY(180deg)}.tp-front,.tp-back{position:absolute;inset:0;backface-visibility:hidden;border-radius:16px;overflow:hidden}.tp-front img{display:block;width:100%;height:100%;object-fit:cover}.tp-back{transform:rotateY(180deg);background:rgba(0,0,0,.85);display:flex;align-items:center;justify-content:center;padding:24px}.tp-content{text-align:center;color:#fff}.tp-title{font-size:clamp(18px,3vw,28px);line-height:1.2;margin:0 0 8px}.tp-text{font-size:clamp(14px,2.2vw,16px);opacity:.9;margin:0}@media (max-width:767px){.tp-card{margin:16px}.tp-back{padding:16px}}`;document.head.appendChild(style)});</script>
<!-- END Image to Flip - @tuanphan - contact [email protected] if you need support -->

#4. To change Overlay Color, use this code to Custom CSS

div.tp-back {
    background-color: #f1f;
}

#5. To make code works on click, not hover, replace #3 with this code

<!-- @tuanphan - Flip on click -->
<script>
document.addEventListener('DOMContentLoaded', function() {
    const imageBlocks = document.querySelectorAll('.sqs-block-image');
    
    imageBlocks.forEach(block => {
        const img = block.querySelector('img[data-sqsp-image-block-image]');
        if (!img) return;
        
        const altText = img.alt || '';
        if (!altText.includes('##')) return;
        
        const imgSrc = img.src;
        const description = altText.replace('##', '').trim();
        
        const flipCard = document.createElement('section');
        flipCard.className = 'tp-card';
        flipCard.innerHTML = `
            <div class="tp-inner">
                <div class="tp-front">
                    <img src="${imgSrc}" alt="${description}">
                </div>
                <div class="tp-back">
                    <div class="tp-content">
                        <p class="tp-text">${description}</p>
                    </div>
                </div>
            </div>
        `;
        
        block.parentNode.replaceChild(flipCard, block);
        
        flipCard.addEventListener('click', function() {
            this.classList.toggle('flipped');
        });
    });
    
    const style = document.createElement('style');
    style.textContent = `
        .tp-card {
            width: min(100%, 720px);
            margin: 24px auto;
            perspective: 1000px;
            cursor: pointer;
        }
        .tp-inner {
            position: relative;
            width: 100%;
            aspect-ratio: 16/9;
            transform-style: preserve-3d;
            transition: transform .6s;
            transform: rotateY(0deg) !important;
        }
        /* Remove hover effect completely */
        .tp-card:hover .tp-inner {
            transform: none !important;
        }
        /* Only flip on click */
        .tp-card.flipped .tp-inner {
            transform: rotateY(180deg) !important;
        }
        .tp-front, .tp-back {
            position: absolute;
            inset: 0;
            backface-visibility: hidden;
            border-radius: 16px;
            overflow: hidden;
        }
        .tp-front img {
            display: block;
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        .tp-back {
            transform: rotateY(180deg);
            background: rgba(0, 0, 0, .85);
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 24px;
        }
        .tp-content {
            text-align: center;
            color: #fff;
        }
        .tp-text {
            font-size: clamp(14px, 2.2vw, 16px);
            opacity: .9;
            margin: 0;
        }
        @media (max-width: 767px) {
            .tp-card {
                margin: 16px;
            }
            .tp-back {
                padding: 16px;
            }
        }
    `;
    document.head.appendChild(style);
});
</script>

 

Buy me a coffee