Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #1438369

    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

    #1438496

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

    Best regards,
    Mike

    #1438969

    hi mike unfortunately site is on localhost so cannot share

    #1439010

    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

    #1439075

    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 1 week, 4 days ago by TBant.
    #1439096

    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

    #1439103

    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

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