-
Posts
-
Hi
In the theme, the image hover shows a red arrow before the click. I need to change it instead of default to other image or other background. For example to have the image in black and White and when hover to show the same picture in color (other file of course).
Thank you very much
Hey hdpcr,
Can you please post the link to your website and point out the image elements you would like to edit?
If you would like to apply it to certain images, please turn on custom CSS field for ALB elements – kriesi.at/documentation/enfold/turn-on-custom-css-field-for-all-alb-elements/ and then edit your element and give it a custom CSS class and then add following code to Quick CSS in Enfold theme options under General Styling tab.your-custom-class img { filter: grayscale(100%); -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -o-filter: grayscale(100%); filter: gray; -webkit-transition: all .6s ease; transition: all .6s ease; -moz-transition: all .6s ease; -o-transition: all .6s ease; } .your-custom-class img:hover { filter: grayscale(0%); -webkit-filter: grayscale(0%); -moz-filter: grayscale(0%); -o-filter: grayscale(0%); filter: none; }Best regards,
YigitHi
Please see the second logo where it says Paraiso. Also loooking at this CSS i don’t see whre to set the image source. as it has to change to other.
Thank you very much
Hi,
Please try adding this code to the Quick CSS section under Enfold > General Styling or to your child themes style.css file:
#av-layout-grid-1 .image-overlay { display: none!important; } #av-layout-grid-1 img { filter: grayscale(100%); -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -o-filter: grayscale(100%); filter: gray; -webkit-transition: all .6s ease; transition: all .6s ease; -moz-transition: all .6s ease; -o-transition: all .6s ease; } #av-layout-grid-1 img:hover { filter: grayscale(0%); -webkit-filter: grayscale(0%); -moz-filter: grayscale(0%); -o-filter: grayscale(0%); filter: none; }Best regards,
YigitHi
Thank you very much for your quick reply.
This is really nice effect, the problem is the page is not updated yet as i didnt know how it goes with this matter. What i need is that image before hover to change to a whole other image on hover. The logo image will be white on black background and i need when hover to be on a gradient (because its the band book guidelines) background as i’m not sure it is possible via CSS i was just asking if i can have image1.jpg and on hover image2.jpg. If you you have any doubt on this please let me know to buit a sample page so you can see it.Than you very much
Hi!
can you please spare a moment and create the demo so we can provide the CSS based on the page results?
Thanks a lot for your understanding
Cheers!
BasilisHi
As you can see in the page the code you provided to me works only if image has colors 4 first logos are actually in color as you can see when hover, and have left the last one (it says Jardin Oriental) as i needed in normal stat its like you see the logo and text are in white and the backroud in black so i need when hover to show the logo as the otherx in color (red beckground) when you hover. All images are jpg
Thank you
Hi,
All of your images have red background while “Jardin Oriental” one does not. Please edit it and upload it with red background as well.
Best regards,
YigitHi
I left it that way on purpose (so you can see it)becasue thats the state of image before hover. All images wiill be that way and when hover i want them with red background if possible.
Thank you
Hey!
It is not easily possible to switch to another image on hover. Please feel free to request such feature here – https://kriesi.at/support/enfold-feature-requests/ or hire a freelance developer if you urgently need it.
Cheers!
YigitHi
It’s ok. Also is it possible instead of grey to hay black and white and on hover the original color. Of course i will have to change the logos ti have them just with plain colors and without background so you can apply black and white filter if exist.
Oh and how do i apply this effect only for selected pages with maybe ABL.Thank you very much
Hi,
please use different tickets for different questions. Explain exactly what you want to achieve in your new ticket. Provide us precise links and if possible also a mockup showing what you want to achieve. You can use imgur.com or dropbox.
Best regards,
AndyHey!
I am not sure if i understood changes you would like to make clearly.
Solutions we provide may not be cross browser and we cannot provide you complicated solutions unfortunately. That being said, please post screenshots showing the changes you would like to make so we can make sure that we are on the same page.Regards,
YigitHi Yigt
Thank you for reponening this ticket. If you can see last balck and white logo (Jardin Oriental) or any image. What i need is the same CSS provided before just instead of Filter Grayscale maybe balck and white if exist.
Thank you very much.
Hi!
Code i posted here – https://kriesi.at/support/topic/image-hover-2/#post-633912 should exactly do that
Best regards,
YigitHi
Thank you for the explanation :)Sorry to bother. I joust found out tthat CSS works just in a grid. What do i have to change to have the same effect in a color section or column etc..
I used the grid to have those 5 logos but what if i want the same effect for other images located outside a grid i mean other images not only logos.
I know this ticket has bee a pain… but one it works here i will be for almost the rest of site :)Thank you very much for your patience :)
Hi,
Have you turned on custom CSS field by referring to this post – kriesi.at/documentation/enfold/turn-on-custom-css-field-for-all-alb-elements/? If so you should be able to edit every element (including column elements :) ) and give them a custom CSS class. You can apply the same CSS class to every element that you would like to apply the effect :)
Best regards,
YigitHi Yigit
I toke the previous CSS (first one) and it worked fine.Thank you very much for this great help and feature.
- The topic ‘Image Hover’ is closed to new replies.