Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • March 26, 2024 at 8:14 pm #1438369
    TBant

    Hi

    I have column link enabled and hover effects disabled on the main element as I want to define my own .

    Inside layout-wholebox, I have two divs with custom classes layout-heading and layout-image
    The hover effect for layout-heading below works, however the one for layout-image does not. Layout-image is an image.

    I think the issue may be related to it being an image.

    I’ve tried with/without the image being linked and have disabled linked image effects under enfold>advanced styling

    #top .layout-wholebox:hover .layout-heading {
    background-color: #ea6a02 !important;
    transition: 0.4s ease-in-out !important;
    }

    #top .layout-wholebox:hover .layout-image {
    transition: opacity 0.4s ease-in-out !important;
    background: #151414c2 !important;
    }

    Help would be appreciated.

    Also wondering if this is efficient use of CSS to create the effect.

    Thanks

    March 27, 2024 at 10:25 pm #1438496
    Mike

    Hey TBant,
    Please link to your page so we can examine and understand better.

    Best regards,
    Mike

    April 2, 2024 at 9:37 am #1438969
    TBant

    hi mike unfortunately site is on localhost so cannot share

    April 2, 2024 at 5:47 pm #1439010
    Mike

    Hi,
    It would be easier to help you if you had a test page that we could see, but as I look at your css above the code for the image background has too many places, most browsers only support six places in a color code, and you are adding a background to an image on hover which you will not see, because it is behind the image.
    Try using a grayscale filter on the image like this:

    #top .layout-wholebox:hover .layout-image {
transition: opacity 0.4s ease-in-out !important;
filter: grayscale(100%);
}

    Here is an example of some other filters that you can use.

    Best regards,
    Mike

    April 3, 2024 at 12:34 pm #1439075
    TBant

    Yes I appreciate it would make things easier for you.

    I’ll see about creating a test site with htpasswd once I have the hosting :)

    Will test your answer. Thanks for the detailed response!

    • This reply was modified 3 months, 3 weeks ago by TBant.
    April 3, 2024 at 4:37 pm #1439096
    TBant

    Hi Mike

    I’ve tried this however filter effect comes on instantly instead of in the transition like the default black/white fade. I basically just want to change the default 0.7 fade transition to 0.4s, ideally in a workaround with CCS

    April 3, 2024 at 5:40 pm #1439103
    Mike

    Hi,
    Try changing your css to this:

    #top .layout-wholebox:hover .layout-image {
    filter: grayscale(100%);
    transition: all 0.4s ease-in-out;
}

    Best regards,
    Mike

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