Customising cursor rollover state within Mercer (Mara Brag) template

Just trying to work out if it's possible to customise my website template code so that the title/description only appears when the cursor is hovering over its image.

In my current website the title/description is permanently displayed in the top left corner of each image.  I'm using the Mercer (Mara Brag) template.

This is my current website: https://www.chrisward.com.au/

I would like each title/description to appear centred on each image, only while hovering as per this example (which is not a squarespace template): https://beautifulstate.co/

Thanks in advance!

Chris

For example first video, you want when hover it > show overlay + Commercial text?

I think if add overlap/text, user can't click video..

Thanks for the reply. 

Yes, I'd like the text to only appear when the user hovers over the image. I've circled the text that I would like to appear in the attached image.

Is this possible? And if it is, how do I customise the code to make it work?

Thanks!

Chris

I'm interested in something similar, in having text or an overlay or an adjusted cursor as an indicator when hovering over an image that the image is clickable as a link. Anyone done this before? 

On 3/21/2024 at 7:10 AM, chris_editor said:

Thanks for the reply. 

Yes, I'd like the text to only appear when the user hovers over the image. I've circled the text that I would like to appear in the attached image.

Is this possible? And if it is, how do I customise the code to make it work?

Thanks!

Chris

You can use this code to Website > Website Tools > Custom CSS

div.Index-gallery-item-content {
    opacity: 0;
}
section.Index-gallery:hover div.Index-gallery-item-content {
    opacity: 1 !important;
}

Thanks @tuanphan I appreciate your help on this!

That code did allow the text to appear on cursor rollover, but it makes each images text appear at the same time in my galleries. I've attached a video of what occurs.

I only want the text corresponding to it's image to appear on rollover.

This is a good example of what I am trying to achieve - https://beautifulstate.co/

Thank you in advance!