Site logo

Archived topic

Hover header image

1 reply · Started by Kate on June 11, 2016

Viewing posts 1–2 of 2

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

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 :)

This archived topic is closed to new replies.