How to add hover text in custom coding page Dawn theme

Store Design
,

Topic summary

A user seeks help adding hover text that displays when mousing over an image on a custom-coded page in the Dawn theme.

Solutions Proposed:

• JavaScript approach: Add a class/ID to the text element, then use event listeners (mousein/mouseout) to toggle display between ‘block’ and ‘none’ when hovering over the image

• CSS-only approach: Use CSS hover pseudo-class (.login_img:hover + .login_inner { display: block }) to show adjacent text elements on hover

Both solutions require adding appropriate classes to the HTML elements. The CSS method is simpler and doesn’t require JavaScript, while the JavaScript approach offers more control. The discussion remains open with no confirmation from the original poster on which solution was implemented.

Summarized with AI on November 22. AI used: claude-sonnet-4-5-20250929.
1

Hello!

I have a custom code page in my theme and I want to see displaying text on mouse hovering over image

brekila_0-1677058079114.png
brekila_0-1677058079114.png1155×321 10.4 KB

this is a code of image

2

Hi @brekila ,

This is Mike from Omega.

First of all, you should and a class or an id for this text, then you can add code below between script tag, and place it on bottom of your file:

document.querySelector('.login_img').addEventListener('mousein', function() {
    document.querySelector('.class-of-text').style.display = 'block'
})
document.querySelector('.login_img').addEventListener('mouseout', function() {
    document.querySelector('.class-of-text').style.display = 'none'
})

You can change ‘class-of-text’ by the class of your display text.

Hope my answer will help you.

Mike from Omega

3

Hi @brekila ,

This is Richard from PageFly - Landing page builder, I’d like to suggest this idea:

.login_wrapper .login_img:hover + .login_inner { display: block }

I hope it would help you
Best regards,

Richard | PageFly