To achieve Flip Effect on Blog Page, like this demo, password: abc
#1. First, you can edit Blog Page to Basic Grid layout
#2. Next, use this code to Blog Page Header Injection
<!-- Blog Page Flip - @tuanphan - 17-09-2025 -->
<script>document.addEventListener('DOMContentLoaded',function(){setTimeout(function(){const blogItems=document.querySelectorAll('.blog-basic-grid--container');if(blogItems.length===0)return;blogItems.forEach(item=>{const img=item.querySelector('.image');const title=item.querySelector('.blog-title a');const excerpt=item.querySelector('.blog-excerpt p');const date=item.querySelector('.blog-date');const author=item.querySelector('.blog-author');if(!img||!title)return;const imgSrc=img.src||img.getAttribute('data-src');const titleText=title.textContent.trim();const titleLink=title.href;const excerptText=excerpt?excerpt.textContent.trim():'';const dateText=date?date.textContent.trim():'';const authorText=author?author.textContent.trim():'';const flipCard=document.createElement('div');flipCard.className='tp-blog-flip';flipCard.innerHTML=`<div class="tp-blog-inner"><div class="tp-blog-front"><img src="${imgSrc}" alt="${titleText}"></div><div class="tp-blog-back"><div class="tp-blog-content"><h3 class="tp-blog-title"><a href="${titleLink}" style="color:#fff;text-decoration:none">${titleText}</a></h3>${authorText||dateText?`<div class="tp-blog-meta">${authorText?`<span class="tp-blog-author">${authorText}</span>`:''}${dateText?`<time class="tp-blog-date">${dateText}</time>`:''}</div>`:''}${excerptText?`<p class="tp-blog-excerpt">${excerptText}</p>`:''}</div></div></div>`;item.innerHTML='';item.appendChild(flipCard)});const style=document.createElement('style');style.textContent=`article.blog-basic-grid--container.entry.blog-item{height:300px!important;opacity:1!important}h3.tp-blog-title{color:#fff!important}.tp-blog-flip{perspective:1000px!important;width:100%!important;height:100%!important;position:relative!important}.tp-blog-inner{position:relative!important;width:100%!important;height:100%!important;transform-style:preserve-3d!important;transition:transform .6s ease!important}.tp-blog-flip:hover .tp-blog-inner{transform:rotateY(180deg)!important}.tp-blog-front,.tp-blog-back{position:absolute!important;top:0!important;left:0!important;right:0!important;bottom:0!important;backface-visibility:hidden!important;border-radius:8px!important;overflow:hidden!important}.tp-blog-front img{width:100%!important;height:100%!important;object-fit:cover!important;display:block!important}.tp-blog-back{transform:rotateY(180deg)!important;background:linear-gradient(135deg,rgba(0,0,0,.9),rgba(20,20,20,.95))!important;display:flex!important;align-items:center!important;justify-content:center!important;padding:30px!important}.tp-blog-content{text-align:center!important;color:#fff!important}.tp-blog-title{font-size:clamp(18px,2.5vw,22px)!important;line-height:1.3!important;margin:0 0 10px!important;opacity:.98!important;font-weight:700!important}.tp-blog-meta{margin-bottom:15px!important;font-size:clamp(11px,1.3vw,13px)!important;opacity:.8!important}.tp-blog-author{margin-right:8px!important}.tp-blog-date{color:#ccc!important}.tp-blog-excerpt{font-size:clamp(13px,1.7vw,15px)!important;line-height:1.5!important;margin:0!important;opacity:.9!important;font-weight:400!important}@media (max-width:768px){.tp-blog-back{padding:25px!important}.tp-blog-title{font-size:20px!important;margin-bottom:8px!important}.tp-blog-meta{font-size:12px!important;margin-bottom:12px!important}.tp-blog-excerpt{font-size:14px!important}}`;document.head.appendChild(style)},500)});</script>
<!-- END Blog Page Flip - @tuanphan - 17-09-2025 -->
