Scroll/touch on mobile to act as hover

Hi!!

I'm quite new to codes and designing a website however I have my desktop view as shown. Portfolio grid is set to "Grid: Overlay", text placement is "center" and overlay opacity is "100". So whenever I move my cursor to a box the image appears (as seen in attachments). This doesn't happen on my mobile (iphone). The boxes stay solid as I scroll down and the image doesn't appear as I touch the screen and I know somehow that is doable!  I want that same effect, the text disappearing and the image showing) on the boxes as I touch the perimeters of the box as I scroll down on my iphone, same as it appears on the desktop. Please let me know what code use or do for this any help is appreciated!! I attached how it looks on desktop, the setting it's on and the mobile view!

Hi,

Can you share link to portfolio? We can check easier

My website is https://www.selinozderici.com ! I was told that the code would be more complicated, a mix of css and js but am still having an issue with making the grid act the same on mobile when scrolling through the tiles.

I found that the mobile version of https://www.brethrendesignco.com/work has achieved this, I just need it to be the same as my desktop version! 

You can consider changing it to Grid on Mobile only, by adding this code to Website Tools (under Not Linked) > Custom CSS

/* Portfolio Overlay to grid mobile */
@media screen and (max-width:767px) {
div#gridThumbs {
    grid-template-columns: repeat(2,1fr);
}
a.grid-item {
    height: unset !important;
    padding-bottom: 0 !important;
}
.portfolio-text {
    position: relative !important;
    opacity: 1 !important;
}
}