Text in the header

[zarmayanaParticipant]

Hi, thanks before for all of your help.

I have one more question
My site, is built for photography tour.
Therefore, i want to optimizing the image or photography.

Now, I already know how to resize header image (thanks to you too). But I want to know, if text in header image can be hover or not?
I really want to show the image, so i need the text to transparant first, and then come up when the cursor at it.

Is there any help for me?

thanks 😊😊😊

[Support TeamKeymaster]

Hello @zarmayana,

To achieve what you want please add below given CSS in your Additional CSS.

.site-header a, .site-header p {
    color: transparent;
}
.site-header:hover a, .site-header:hover p{
    color: #555;
}
.site-header .site-title a:hover {
color:#df1814;

}

Hope this helps.

Best Regards!!

[zarmayanaParticipant]

Hi, thanks a lot
i’m sorry for not state clearly and do mistake..
I mean the text in slider image

https://ibb.co/g2gHEn

[Support TeamKeymaster]

Hello @zarmayana,

No worries 🙂 . Now to do the same for the content in the slider section use below given CSS.

.featured-slider:hover .featured-slider-contents {
    opacity: 1;
}
.featured-slider .featured-slider-contents {
    opacity: 0;
}

Hope this helps.

Best Regards!

[zarmayanaParticipant]

Thanks!
Oh ya, for the font size issues in the slider..
I put the code, but only the description that getting smaller.
meanwhila the others is not, like i show in the picture..

[Support TeamKeymaster]

Hello @zarmayana,

Now to change the font size of the text in the slider use below given CSS.

For the title:

.featured-slider .featured-slider-contents h1 {
   font-size: 35px;
}

For the content:

.featured-slider .featured-slider-contents p {
    font-size: 18px;
   
}

Here adjust the font size as per your requirement.

Hope this helps.

Best Regards!!

[Author]

Posts