Post Hover Color

  • Resolved danachew

    (@danachew)


    1 year, 2 months ago

    Hey! I am trying to emulate the effect this website (https://tresbirds.com/) has where if you hover over a blog post, the background changes to a different color. Is there any way to achieve this in the 2023 theme? I used this CSS

    /* Button hover */
    .wp-block-button__link:hover {
    background-color: #9DFF20;
    color: #FFFFFF;
    }

    I found in another post to do something similar to the buttons, but I’m not sure how to achieve this for posts. Thank you for the help!

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

Viewing 7 replies - 1 through 7 (of 7 total)
  • Moderator jordesign

    (@jordesign)

    Hey @danachew – When I check out the site it looks like you managed to figure out the CSS you needed for this – nice work!

    Please do let me know if there’s any further assistance you need there.

    Moderator jordesign

    (@jordesign)

    My apologies @danachew – I was looking at the example site you mentioned ???

    There’s some CSS code here you could use to try and get the same effect.

    .home .wp-block-query li:hover {
    background: green;
}

    You can add that CSS code following these instructions:https://www.ads-software.com/documentation/article/styles-overview/#applying-custom-css

    And you can change the green portion of the code to be whatever color you’d like.

    Thread Starter danachew

    (@danachew)

    Perfect! I was able to get that code to work. Along those same lines, would you have any idea about how to make the whole blog post preview clickable, not just the image? If that’s not possible, even just making the text clickable would be a good start. Thank you for the help!

    Moderator jordesign

    (@jordesign)

    Hey @danachew – there won’t really be a way to make the whole preview clickable (as there’s no link around all of it). But you can definitely make the title clickable.

    I see you’re using the Post Title block within the Query Block – if you go and edit it you’ll see you have an option to link the title to the post itself.

    https://www.ads-software.com/documentation/article/post-title-block/#block-settings

    Thread Starter danachew

    (@danachew)

    Thank you! Last question along these lines, I’m trying to insert the same posts block that’s on my homepage to the bottom of the ‘single post’ template so that my posts are listed at that bottom of each post. I created a pattern/reusable block for the posts, but when I insert it into the ‘single post’ template it doesn’t show up on the front end. Any idea why it’s not liking the post list in the single post template?

    Thank you again for the help, it’s very much appreciated.

    @danachew, if the initial question is resolved, could you please open a separate thread for subsequent questions? It makes life a lot easier for volunteers to keep track of what has been solved and it also makes it easier for users looking for answers to have individual threads for each question. I am marking this one as resolved for now, thank you for understanding ??

    When you open a new thread, please include a screenshot to your post/template setup.

    Thank you!

    Thread Starter danachew

    (@danachew)

    No problem! I appreciate all the help.

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘Post Hover Color’ is closed to new replies.