Darker on hover, instead of lighter

  • Daniel

    (@dmaryanovsky)


    9 years, 4 months ago

    First of all, fantastic theme, I absolutely love its simplicity and clean aesthetic!
    In its default setup, images, posts, menus, social icons and headings are slightly darkened and upon hover go to full brightness (opacity). Is it possible to reverse this so that at default they are fully opaque (bright) and when hovering over they become darker?

    Thank you ??

Viewing 6 replies - 1 through 6 (of 6 total)
  • Theme Author Ben Sibley

    (@bensibley)

    Thanks for the kind words!

    That can be done with the following CSS:

    .site-title,
.menu-primary-items a,
.menu-primary-items .sub-menu li a,
.menu-primary .site-description,
.social-media-icons a,
.site-header .search-icon i {
  opacity: 1;
}
.site-title a:hover,
.menu-primary-items a:hover,
.menu-primary-items .sub-menu li a:hover,
.menu-primary .site-description,
.social-media-icons a:hover,
.site-header .search-icon i:hover {
  opacity: 0.6;
}

    You can copy and paste that code into the “Custom CSS” section in the Customizer (Appearance > Customize). Once added there, it should take affect right away.

    Thread Starter Daniel

    (@dmaryanovsky)

    Amazing! Thanks so much for the quick reply, it works a treat ?? And to do the same with the footer menu/footer title?

    Thread Starter Daniel

    (@dmaryanovsky)

    Sorry, also how to do the same with the excerpt title?

    Theme Author Ben Sibley

    (@bensibley)

    Sure thing! Here’s the additional CSS for the footer title and menu, and excerpt title:

    #menu-footer-items a,
#site-footer h3 {
  opacity: 1;
}
#menu-footer-items a:hover,
#site-footer h3 a:hover {
  opacity: 0.6;
}
.excerpt-title a, .excerpt-title a:link, .excerpt-title a:visited {
  color: #222;
}
.excerpt-title a:hover, .excerpt-title a:active .excerpt-title a:focus {
  color: #4d4d4d;
}

    I’ve just found this in response to a post I made earlier. I now have brilliant white header section and title which dim on hover but the code above for the footer and excerpt section is not working ….

    Theme Author Ben Sibley

    (@bensibley)

    Gwil,

    I just posted a response to your other thread with a solution. Can you try that out and post any further questions there?

    Thanks!

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘Darker on hover, instead of lighter’ is closed to new replies.