Black Friday Sale! Get up to $30 off GP Premium! Learn more ➝

Home Forums Support Hover header image

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #201166
    Kate

    Hi Tom! Is there a way to make the header change to a different image when hovered on?

    #201224
    Tom
    Lead Developer
    Lead Developer

    Hi there,

    You’ll need to add your header using HTML in GP Hooks.

    1. Remove your header in the Customizer.
    2. Add something like this into the “Before Header Content” hook in GP Hooks:

    <div class="custom-headers">
        <div class="header-1">
            <img src="URL TO HEADER 1" alt="" />
        </div>
        <div class="header-2">
            <img src="URL TO HEADER 2" alt="" />
        </div>
    </div>

    3. Add this CSS:

    .custom-headers .header-2,
    .custom-headers:hover .header-1 {
        display: none;
    }
    
    .custom-headers:hover .header-2 {
        display: block;
    }

    That should get you started 🙂

Viewing 2 posts - 1 through 2 (of 2 total)
  • You must be logged in to reply to this topic.