Tweaking hover overlay on Featured Images

  • Author
    Posts
  • #144175

    Hi!

    I’m wondering what CSS to use, if I want to change the white colored overlay that shows up when I mouse hover over the Featured Images, and also slowing down the speed of the featured images enlarging? Have already been tinkering with some CSS to tweak the appearance, (no zoom-in animation, very transparent overlay) but curious if I can choose the color and speed too.

    Here’s the CSS I have so far:

    article.post-archive.has-thumbnail:hover .post-image-wrapper,
    article.post-archive.has-thumbnail.focus .post-image-wrapper {
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0.9;
    }

    My site is this btw: https://riclimstudio.com/
    Thanks!
    Ric

    The blog I need help with is riclimstudio.com.

    #144202

    binarymoon
    Theme Author

    Hi Ric

    The transparency is what’s causing the white fade, so if you want to change the colour you will need to change the background of the container.

    The following will change the tint to red.

    article.post-archive {
    background-color: #ff0000;
    }

    The speed can be changed by changing your previous code to include the transition property:

    article.post-archive.has-thumbnail:hover .post-image-wrapper,
    article.post-archive.has-thumbnail.focus .post-image-wrapper {
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0.9;
    transition: all 0.15s ease-in-out;
    -webkit-transition: all 0.15s ease-in-out;
    }

    The important bit is the 0.15s which is 0.15 seconds. We need to include 2 rules (transition and -webkit-transition) so that the code works in all browsers.

    Thanks – Ben

    #144208

    Thanks Ben, for the super quick reply for the CSS code tweaks.

    It works, and I decided to go back to white for the background color. Red is too funky :)

    Ric

    #144209

    binarymoon
    Theme Author

    I always use red as a demo colour since it stands out. If you wanted to try a different colour you can use any hexadecimal colour – just replace ff0000 with the number you want.

    You can select colours here: https://prothemedesign.com/tools/color-picker/

The topic ‘Tweaking hover overlay on Featured Images’ is closed to new replies.