Image Hover effects for Post Carsousel

  • I want to make the images in my posts carousel appear slightly faded so that the title appears more clearly over the top of the image. I would also like to make it so that the title, when hovered upon, has an animated underline effect. Can anyone help?

    Here is a link to my homepage currently with the images in full clarity: [ redundant link deleted ]

    here is something like how I want it to appear: https://chloe.codesupply.co/food/

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

Viewing 3 replies - 1 through 3 (of 3 total)

  • Since you are using Kadence as your theme and they also control the images, I would recommend you to contact their support forum: https://www.ads-software.com/support/theme/kadence/

    Hi,

    I’ve checked your website and would like to assist you.

    Please navigate to WordPress Customizer → Additional CSS, then paste the following CSS code to apply the fix:

    .pk-pin-it-container:before {
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    bottom: 0;
    left: 0;
    }

    .kt-post-loop22_0e720b-f3 .kt-blocks-post-grid-item .entry-title {
    position: relative;
    display: inline-block;
    cursor: pointer;
    transition: all 0.3s ease;
    }

    .kt-post-loop22_0e720b-f3 .kt-blocks-post-grid-item .entry-title::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -5px; /* Adjust this value to control the distance from text / width: 0; height: 2px; background-color: #ffffff; / Change color as needed */
    transition: width 0.3s ease-in-out;
    }

    .kt-post-loop22_0e720b-f3 .kt-blocks-post-grid-item .entry-title:hover::after {
    width: 100%;
    }

    This should resolve the issue and work as expected. Let me know if you need further assistance!

    1. check the ids or clasess of the elements you want to give effects using a tool like google dev tools.

    2. apply the css rules to the ids or clasess.(you can check websites like codepen for these kinds of effects for code)

    3. rather than using the theme editor, i recommend to add these rules to a seperate css file then enqueue to your theme.

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