Is it possible to change the images on hover on the portfolio-grid on my homepage?
For example: at first I want all portfolio-grid images to be shown as black/white images, but when hovering them, I want other images to be shown in color in stead of the black/white images which are shown when opening the homepage.
Like to hear from you soon again! Thanks in advance!
Add this into the Custom CSS box in your Salient Theme Options panel (We write all Custom CSS in the Live Browser to ensure accuracy. If you cannot see any changes, make sure there is no red cross in the Custom CSS Box as any syntax error would cause all CSS under that line of code to not show up on the Frontend):
I guess I've managed to create a work-around to show a different image when hovering a portfolio-image in the grid on the homepage... ;-) But... I don't know if it's the right way and if it's supported by all browsers... After all, I'm no CSS-mastermind...
In the 'Project Configuration'-tab of each separate portfolio-item you can add a 'Custom CSS Class Name'. With some custom CSS I've added a background-image to that particular class and a few custom CSS lines to set the opacity of the standard portfolio-image to '0', so the background image will be shown when hovering the standard portfolio-image.
But... as you can see in the attached screenshots, the background-image should be shown in the exact same size as the standard portfolio-image is shown, but I don't know how to do that... By the way, the used images are just example-images to show the 'problem'...
So, my questions:
• is this a proper way to do so? and...
• if it is, can you help me to get the code right?
Hope to hear from you soon again. Thanks in advance!
We do not have this feature at the moment, however you can send in your admin login credentials so that we can look at the workaround css you have added?
Add this into the Custom CSS box in your Salient Theme Options panel (We write all Custom CSS in the Live Browser to ensure accuracy. If you cannot see any changes, make sure there is no red cross in the Custom CSS Box as any syntax error would cause all CSS under that line of code to not show up on the Frontend):
When hovering the portfolio-image now, the background image reveals, like I want it to. But they're not exactly the same size. The width of both images are equal but the height of both images isn't (but both images used are having exactly the same measures).
Do you know what goes wrong here? And, more important, how to solve this issue?
Hope to hear from soon again. Thanks for all the help so far! Really appreciate it!
Thanks for your reply. Because I want to keep the masonry layout, enabling it isn't an option for me. Sorry! ;-)
I think it's very strange the size of both images is the same, but the background image is being shown a bit different (a bit larger in height) than the portfolio image. The width of both images shown is exactly the same.
What's the cause of this disproportionate difference in height than? And how can it be solved? Is it a 'bug'?
Like to hear from you soon again. Thanks in advance!
As I can't seem to get the work-around to work exactly as I want it to, I decided to only change the image from B/W to color on hover. Very grateful for your help though!
Hi there,
Is it possible to change the images on hover on the portfolio-grid on my homepage?
For example: at first I want all portfolio-grid images to be shown as black/white images, but when hovering them, I want other images to be shown in color in stead of the black/white images which are shown when opening the homepage.
Like to hear from you soon again! Thanks in advance!
Kind regards,
Rigo.
Hey Again,
Add this into the Custom CSS box in your Salient Theme Options panel (We write all Custom CSS in the Live Browser to ensure accuracy. If you cannot see any changes, make sure there is no red cross in the Custom CSS Box as any syntax error would cause all CSS under that line of code to not show up on the Frontend):
.portfolio-items[data-col-num=elastic] .col img { filter: grayscale(1) !important; } .portfolio-items[data-ps="8"] .col:hover img { filter: grayscale(0) !important; }Thanks
ThemeNectar Support Team
Thanks for your quick respons Tahir.
Is it also possible the show a complete different image when hovering a portfolio-image in the grid?
Hey Again,
I am afraid its not possible at the moment.
Thanks
ThemeNectar Support Team
Hi Tahir,
Ok. Thanks anyway ;-)
Kind regards,
Rigo.
Hi Tahir,
I guess I've managed to create a work-around to show a different image when hovering a portfolio-image in the grid on the homepage... ;-) But... I don't know if it's the right way and if it's supported by all browsers... After all, I'm no CSS-mastermind...
In the 'Project Configuration'-tab of each separate portfolio-item you can add a 'Custom CSS Class Name'. With some custom CSS I've added a background-image to that particular class and a few custom CSS lines to set the opacity of the standard portfolio-image to '0', so the background image will be shown when hovering the standard portfolio-image.
But... as you can see in the attached screenshots, the background-image should be shown in the exact same size as the standard portfolio-image is shown, but I don't know how to do that... By the way, the used images are just example-images to show the 'problem'...
So, my questions:
• is this a proper way to do so? and...
• if it is, can you help me to get the code right?
Hope to hear from you soon again. Thanks in advance!
Kind regards,
Rigo.
Hi Rigo,
We do not have this feature at the moment, however you can send in your admin login credentials so that we can look at the workaround css you have added?
Thanks.
Hey Again,
Add this into the Custom CSS box in your Salient Theme Options panel (We write all Custom CSS in the Live Browser to ensure accuracy. If you cannot see any changes, make sure there is no red cross in the Custom CSS Box as any syntax error would cause all CSS under that line of code to not show up on the Frontend):
.portfolio-items .pasta .inner-wrap .work-item { background-image: url(https://mssiv.nl/wp-content/uploads/2022/04/shutterstock_1463692415_2000x1000px_LOGO_KLEUR.jpg); background-size: cover; }Thanks
ThemeNectar Support Team
Hey Tahir,
Thanks for your reply. We're almost there!
When hovering the portfolio-image now, the background image reveals, like I want it to. But they're not exactly the same size. The width of both images are equal but the height of both images isn't (but both images used are having exactly the same measures).
Do you know what goes wrong here? And, more important, how to solve this issue?
Hope to hear from soon again. Thanks for all the help so far! Really appreciate it!
Kind regards,
Rigo.
Hi Rigo,
Please try making changes on the layout or disable the masonry layout as shown here:
Thanks.
Hi Judith,
Thanks for your reply. Because I want to keep the masonry layout, enabling it isn't an option for me. Sorry! ;-)
I think it's very strange the size of both images is the same, but the background image is being shown a bit different (a bit larger in height) than the portfolio image. The width of both images shown is exactly the same.
What's the cause of this disproportionate difference in height than? And how can it be solved? Is it a 'bug'?
Like to hear from you soon again. Thanks in advance!
Kind regards,
Rigo.
Hey Again,
I can see the hover working correctly on the Right most Project?. Since this is a workaround which is not working 100% we can not count this as a bug.
Thanks
ThemeNectar Support Team
Hi Tahir,
Thanks for your reply again.
As I can't seem to get the work-around to work exactly as I want it to, I decided to only change the image from B/W to color on hover. Very grateful for your help though!
This ticket can be closed. ;-)
Kind regards,
Rigo.