Reverse hover opacity

  • Resolved brokendown

    (@brokendown)


    9 years, 4 months ago

    Hi Ben,

    First and foremost, I found this theme today and I love it! Thank you so much for sharing and allowing us all to enjoy it for our webpages. I’m using it for my band ??

    Now then, is it possible to reverse the opacity of the hover for all areas of the page. I would like content areas to be bright white (if that makes sense) and then dim out (as they are by default) when hovered over.

    Thanks in advance.

    Gwil Jones

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

    (@bensibley)

    Hey Gwil,

    Thanks for the kind words, glad you like the theme ??

    You can keep the content in the Posts at full brightness with the following CSS:

    .excerpt {
  opacity: 1;
}

    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 brokendown

    (@brokendown)

    Thanks Ben. That works great.

    Could you also give me the code to do the same with the header (social media icons etc) and footer text please?

    Ideally, i’d like everything to be bright by default then reduce in opacity when you hover over it. The reverse of your original theme if you like.

    Any ideas?

    Thanks.

    Theme Author Ben Sibley

    (@bensibley)

    Okay I see, sorry for leaving the other elements out. You can use the following CSS to do this instead:

    .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,
.excerpt,
#menu-footer-items a,
#site-footer h3 {
  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,
.excerpt:hover,
#menu-footer-items a:hover,
#site-footer h3 a:hover {
  opacity: 0.6;
}

    This will reverse the opacity effect for the following elements, so they are bright by default and dim on hover:

    • site title (in header & footer)
    • menu items
    • tagline
    • social media icons
    • search icon
    • posts (on blog)
    • footer menu
    Thread Starter brokendown

    (@brokendown)

    That’s just what I was after thank you so much!

    I’ve been trawling through this forum and your support is second to none. Great job.

    I have a few more questions but I’ll post them in separate new threads as I haven’t seen them answered as yet so they may be useful for others.

    Sincere thanks again,

    Gwil

    Theme Author Ben Sibley

    (@bensibley)

    Sounds good, just let me know what you need and I’ll provide an answer as soon as I can ??

    P.S. Would you mind taking a minute to leave a review for Tracks? Thanks!

    Thanks! This worked great for me, can you add a section for the featured image to appear light and go dark over hover as well please?

    found the solution on like page 9 or something lol..

    .entry .featured-image:after {
    opacity: 0;
    }

    Thanks! you guys have really good support! Glad I could find what I needed.

    Theme Author Ben Sibley

    (@bensibley)

    Yea no problem, thanks for adding the solution here ??

Viewing 8 replies - 1 through 8 (of 8 total)
  • The topic ‘Reverse hover opacity’ is closed to new replies.