Making featured images reactive

  • Author
  • #15208

    Hi there,

    I realise this is a long shot. But I was wondering if it’s at all possible to make the featured images on my portfolio page change colour when you hover over them with the mouse? And I would like to specify the colour…

    I think it will help the experience for the user.


    The blog I need help with is


    Theme Author

    Hi there!

    Unfortunately, this is not possible. You could, however, replace your image with a solid hover color by adding in the following code:

    /* Hover background color */
    .projects-thumb:hover {
        background: #1B67E0;
    .projects-thumb:hover img {
        visibility: hidden;

    Feel free to change the color value of #1B67E0 to your liking. You may also find it helpful to use this color picker.

    I understand, though, this is not ideal. I’m sorry I don’t have a better answer for you :(



    Thanks so much for your support. I knew this would be unlikely!

    I thought I’d give the code a try, however I’m not having any luck. Would you mind being more specific as to where to enter the code? I’m assuming in the post belonging to the featured image? I’ve copied and pasted your CSS in the text tab, at the end of the current CSS. However it just appears at the bottom of the page like so… (scroll all the way down)

    I am new to CSS, so I have no idea what I’m doing! If you feel it’s simple enough to talk me through that would be great.



    Theme Author

    Hi again :)

    To apply custom CSS styles, you will need the Custom Design upgrade. With this upgrade, please follow these steps:

    1. Navigate to Appearance → Custom Design → CSS
    2. Paste your custom CSS into the bottom of your CSS editor

    I hope this helps! Let us know if you have any questions.


    It works!

    Thanks so much for all your help.



    Theme Author

    You’re welcome! I’m glad to help :)

The topic ‘Making featured images reactive’ is closed to new replies.