badget

Biggest Sale! Special Offer!

Get 50% discount on all of our single themes with this coupon code: #50%SALE

Hurry up! *Limited time offer*

Change colour blocks and text when hovering over homepage images

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #49795
    Emily
    Participant

    Hello!

    At the moment the default is totally white with black text – is it possible to make the colour block when you hover over one of the homepage images slightly transparent so you can still see the image through it?

    If this colour was dark, how would you change just the text over it to white (not any other text styles)?

    Thank you

    #49904

    Hi Emily,

    To make the block slightly transparent when hover over and to change just the text over it to white you have to add custom CSS go to Appearance > Customize > Additional CSS and paste the below CSS code then click on Save button.

    .post-main .has-post-thumbnail .entry-wrap:hover .entry-main {
        opacity: 0.8;
        -moz-opacity: 0.8;
    }
    .post-main .post .entry-main .entry-title a,
    .post-main .post .entry-main p {
        color: #fff;
    }
    

    Thank you!

    #49914
    Emily
    Participant

    Thank you 🙂

    How would I change the opacity of just the background, not the text as well please?
    At the moment the white text code only affects the excerpt text not the title, is there a way to include that too? I think at a the moment that takes font colour from a more general heading style.

    Thank you, Emily

    #49977

    Hi Emily,

    Ok then please below Custom Css then.

    .post-main .has-post-thumbnail .entry-wrap:hover .entry-main {
        background-color: rgba(255, 255, 255, 0.8);
    }

    Thank you!

    #50046
    Emily
    Participant

    Thank you

    #50069

    You welcome Emily

    Thank you

Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.