BugWP logo BugWP
Back to Community
Home / Community / Theme → Twenty sixteen

How to Remove or Customize the Header Image Hover Effect in Twenty Sixteen

28 threads Sep 16, 2025 Theme → Twenty sixteen

Content

A common customization request for the Twenty Sixteen theme involves the header image's interactive hover effect. Many users find that when their cursor passes over the header, the image lightens or a "ghostly" alternate version appears. This article explains why this happens and provides clear solutions to either remove or customize this behavior.

Why Does the Header Image Change on Hover?

The hover effect is a deliberate design feature implemented by the Twenty Sixteen team. It's controlled by CSS that applies an opacity change to the header image when a user hovers their mouse over it. This is intended to provide visual feedback, but it may not align with every site's design goals.

How to Remove the Hover Effect with CSS

The most effective and upgrade-safe method to remove this effect is by adding a small amount of CSS to your site. This will completely disable the hover behavior, leaving the header image looking consistent at all times.

Option 1: Using the Customizer (Recommended)

  1. Navigate to your WordPress Dashboard.
  2. Go to Appearance → Customize.
  3. Click on Additional CSS.
  4. Paste the following code snippet into the CSS editor: 
    .site-header .header-image:before {
    display: none !important;
}

.site-header .header-image:hover {
    opacity: 1 !important;
}
  5. Click Publish to save your changes.

Option 2: Using a Child Theme

If you are already using a child theme, you can add the same CSS code to your child theme's style.css file. This is the best practice for making permanent customizations.

Alternative Solution: Editing the Header Template

For advanced users who have moved the header structure and need more control, another method involves modifying the theme's template file. However, this approach requires using a child theme to prevent your changes from being overwritten during a theme update.

  1. In your child theme, copy the parent theme's header.php file.
  2. Locate the line containing header_image();.
  3. You will find the header image is wrapped in an anchor tag (<a>) that links to the homepage. To remove the hover effect by removing the link itself, you can delete the <a> tags, leaving only the <img> tag. Note: This will also make the header image non-clickable.

Important: Directly editing theme files is not recommended for beginners, as incorrect changes can break your site. Always use a child theme and create a backup first.

Conclusion

Whether you want to remove the hover effect for a cleaner look or simply customize it to better suit your brand, the CSS method provided is the safest and most effective solution. By using the Additional CSS option in the Customizer, you can achieve the desired result without affecting your theme's core files, ensuring your site remains stable and update-proof.

Related Support Threads Support