![Check out Enfold](https://kriesi.at/wp-content/themes/kriesi/images/banner-enfold.jpg)
-
AuthorPosts
-
March 26, 2024 at 8:14 pm #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
March 27, 2024 at 10:25 pm #1438496Hey TBant,
Please link to your page so we can examine and understand better.Best regards,
MikeApril 2, 2024 at 9:37 am #1438969hi mike unfortunately site is on localhost so cannot share
April 2, 2024 at 5:47 pm #1439010Hi,
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,
MikeApril 3, 2024 at 12:34 pm #1439075Yes 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 5 months, 1 week ago by
TBant.
April 3, 2024 at 4:37 pm #1439096Hi 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 -
This reply was modified 5 months, 1 week ago by
-
AuthorPosts
- You must be logged in to reply to this topic.