how suppress header hover alternate image

  • Resolved susantau

    (@susantau)


    7 years, 3 months ago

    In my child of Twenty Sixteen I have moved the header to be at the top of the page. That seems to be working fine.

    The problem is with the hover. When I pass the cursor over the header (sky/clouds/red plane), I see a paler version of the header image.

    What I would like is: no change in the header when you pass the mouse over the header area – no ghostly alternate image at all.

    Is there a way to control this through CSS?

    Thank you for any suggestions!

    • This topic was modified 7 years, 3 months ago by susantau.
    • This topic was modified 7 years, 3 months ago by susantau.
    • This topic was modified 7 years, 3 months ago by susantau.
    • This topic was modified 7 years, 3 months ago by susantau.
    • This topic was modified 7 years, 3 months ago by susantau.

    The page I need help with: [log in to see the link]

Viewing 5 replies - 1 through 5 (of 5 total)
  • Thread Starter susantau

    (@susantau)

    I’ve decided to try to work more closely with the classic Twenty Sixteen theme – keeping logo at top and not using my wide header at all. So you won’t see the issue described in my first post above, if you go to my site now. HOWEVER, I am still very interested in ideas about how the ghosted header hover works in Twenty Sixteen – because I would prefer to use my wide banner at the top of my pages if I could eliminate the undesired hover behavior.

    • This reply was modified 7 years, 3 months ago by susantau.
    Thread Starter susantau

    (@susantau)

    Well, I have changed my plan once again. I am back to my original idea to use the wide header at the top.

    SO I would LOVE if someone could tip me off as to how to stop the hover behavior that causes a paler version of the header to display when moving the cursor over the header.

    • This reply was modified 7 years, 3 months ago by susantau.
    Thread Starter susantau

    (@susantau)

    This might be working – but I have no idea why:

    In addition to specifying the header image through the Customizer, I also declared the header image in my child style sheet:

    .header-image 
{background-image: url(/images-decjan2017/wildblue_redplane_1200x444.jpg);}
    • This reply was modified 7 years, 3 months ago by susantau.
    • This reply was modified 7 years, 3 months ago by susantau.
    • This reply was modified 7 years, 3 months ago by susantau.
    Thread Starter susantau

    (@susantau)

    EUREKA and wow, major DUH, that was so dumb what I was doing. (I realized my last “fix” was wrong because at different display sizes I was still seeing the automatic hover image.)

    The solution:
    All I had to do was find this style in the Twenty Sixteen style.css sheet, and change the opacity from .85 to 1.

    .header-image a:hover img,
.header-image a:focus img {
	opacity: 0.85;
}
    Thread Starter susantau

    (@susantau)

    This solution allows the Customizer header function to do its magic unhampered (providing responsive resizing across all display widths) without decreasing opacity during hover (or focus).

    • This reply was modified 7 years, 3 months ago by susantau.
Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘how suppress header hover alternate image’ is closed to new replies.