Okay
  Public Ticket #2874041
Portfolio item text color (on hover) + effect on a range + disable animation
Closed

Comments

  • teatimeadmin started the conversation

    Hello,

    I have 3 questions :

    • I want to know how to change the text color to white on this specific portfolio item (see attached) on home page.
    • I want to know how can I add a hover effect on every range of this page (https://rhizo.ch/champs-d-action-liste). Like a zoom when cursor goes on.
    • How to disable the hover links animation?

    Best regards

  • [deleted] replied

    HI teatimeadmin,

    1— Please add the code below to your Custom CSS area:

    .portfolio-holder .post-2113 .item-box .thumb .hover-state h3 a {
        color: #fff;
    }

    2— Can you please try to be very specific about the question and explain it more to me so I can easily understand you and give you the proper answer.

    3— Just add this CSS code to your Custom CSS area:

    .wrapper a:after, footer.site-footer a:after {
        background-color: transparent;
    }

    Have a nice day!

  • teatimeadmin replied

    Hello,

    Thank you for your answer !

    Unfortunately nothing worked :

    1 - You can see attached. It changes the text color, but on hover, the text keeps in black.

    2 - Yes sure, here is what I want to do, for every range on this page (https://rhizo.ch/champs-d-action-liste/) : https://www.w3schools.com/howto/howto_css_zoom_hover.asp

    3 - No links have switched to transparent

    Regards

  • [deleted] replied

    Hi teatimeadmin,

    1— First you had a problem in your Custom CSS area. See video: https://d.pr/v/xrRNwa, and the CSS codes that were below that problem were not working because of that.

    Now I changed the ID of the project so now the third item font color is white instead of fourth. See video: https://d.pr/v/6JqXYL

    2— You can add animation for those areas but not hover animations (see video). That is possible only if you add CSS codes to achieve that.

    If you're looking for professional help in this matter, there's always someone available for such tasks on Codeable or WP Kraken website. Pricing and timeline are always straightforward there and that's the main reason for recommending those services.

    3— Now the code works, because of the problem that I resolved in the first answer.

    Have a nice day!

  • teatimeadmin replied

    Hi Ylli,

    My bad...thank you, it's working now.

    For the hover effect, I achieved it by simply adding this on my custom CSS :

    .vc_custom_1631736852920, .vc_custom_1426246383421, .vc_custom_1631555896578 {
        transition: 0.2s ease-in-out;
    }
    .vc_custom_1631736852920:hover, .vc_custom_1426246383421:hover, .vc_custom_1631555896578:hover {
        transform: scale(1.02);
    }

    Thank you.

  • [deleted] replied

    I'm happy that I helpedsmile.png

    Great, that seems the be the adequate code.

    Have a great day!

    P.S: If you enjoy our theme, you can head over to your Downloads tab and give it 5 stars. We will love you forever.