To make Portfolio Title and Overlay appears on scroll on Mobile, you can follow these.
#1. Use this code to Custom CSS
a.show-text {
.portfolio-overlay {
opacity: 0.8 !important;
}
.portfolio-text {
opacity: 1 !important;
}}
#2. Use this code to Code Injection > Footer
<script>
(function() {
let lastActiveItem = null;
function handleScroll() {
const items = document.querySelectorAll('a.grid-item');
const viewportHeight = window.innerHeight;
items.forEach(item => {
const rect = item.getBoundingClientRect();
const inView = (
rect.top >= viewportHeight * 0.2 &&
rect.top <= viewportHeight * 0.8
);
if (inView) {
if (lastActiveItem && lastActiveItem !== item) {
lastActiveItem.classList.remove('show-text');
}
item.classList.add('show-text');
lastActiveItem = item;
}
});
}
let scheduled = false;
window.addEventListener('scroll', () => {
if (!scheduled) {
scheduled = true;
window.requestAnimationFrame(() => {
handleScroll();
scheduled = false;
});
}
});
handleScroll();
})();
</script>