Text to appear on click

Good day everyone.

Please help. How do I make the text to appear on click on mobile devices for the images?

Here is the link for the portfolio: https://www.ptphotography.com

Thank you in advance!

Hi. Have you solved it yet?

17 hours ago, tuanphan said:

Hi. Have you solved it yet?

Thank you for replying. @tuanphan, no, unfortunately, I have not solved it yet.

Stay safe,
P

This is more a usability/concept issue - hover do not exist on mobile, so  you cannot click on the image to make the text appears when the click action is used as a navigation item.
An alternative would be that on mobile, you display the text under the image? 
Or do you want only to have the text and no link behind the images? 

@GSv Thank you so much for giving me those options! Please, I would truly appreciate it if you can help me with the code to display the text under the image. I would like to keep the link on the images on click if possible. 

Best regards,
P

Im sorry, I was just giving some examples for  alternative solutions but I can't really code that - it would take quite some time.
You might need to hire an expert to get a custom-made solution, or use a different type of gallery if your template allows it. 
Just curious: what template are you using? 

@gsv thank you for this. I am using Mark Novo 7.1. 

The portfolio page is built in so I am at lost as to where to proceed. But appreciate your help. It's nice to see I have got options. 

I see you solved?

@tuanphan no sir, not yet. Can you please help? I can wait for as long as it takes 🙏

I can write something up to display the text when the photo is on the screen. So as you scroll though the text shows up and goes away as you scroll past.

Would that work?

@rwp That is the best news I have heard today. Would appreciate that very much. Thank you!

Might take me some time.

Unrelated, when your page loads, this flashes on the screen.

1 hour ago, rwp said:

Might take me some time.

Unrelated, when your page loads, this flashes on the screen.

@rwp lol, it is a code I have hidden. I have taken it out now.

No rush. You have been very helpful to me, please take your time 🙏

I have this mostly figured out.  Still fine tuning something.

Alight, give this a go.

Sorry for the run about, but I am tracking the plugin views to see what is popular.

Head to my website: https://ultraoutlook.com/

Click the codepen link at the bottom.

Then click scroll to hover.

You will need to add the CSS to design -> CSS

Then add the JS to the page code injection (don't for get to add the <script> and </script> tags.

You already have jQuery on your page, so you don't need to do anything with that.

Let me know how this works. The formula for the scroll location was one I found online, I didn't have time to write a different one, hopefully its ok.

@rwp I am very pleased! The world is pleased! The universe is pleased! You rock! 🙌🤣

@rwptried this on my shop page and wrote this code on my css:

.image-overlay.hovering {
  opacity: 0.44 !important;
}

.image-text.hovering {
  opacity: 1.0 !important;
}

but it doesn't work 🤣. I am hopeless lol

Can you correct it please?

Shop page:
https://www.ptphotography.com/shop

The shop will need a different code. It doesn't use the same elements as the other page. I will check it out asap.

Hello @rwp sorry for chasing you, but can you please help me with the code? 

Thank you in  advance.
Best regards,
P

I will try to get to this later today. The shop is more complicated and I have been crazy busy lately.

@Ptphotography sent you a message