Hover effect from project thumbnails on image

[anamsp]

Hey! I need multiple project thumbnails linking to one project. My workaround was to link images to the project page. Is there a way to add the same hover effects from the project thumbnails to the images?

This is the page: https://mariairl.de/startseite
These are my current settings -> "Project Thumbnail Mouseover":
Brightness 50%
Background Color: #9cae9e
Opacity: 50%
Zoom: none
Animate blur: yes

I tried to find a solution through the inspector and the forum, but didn't get anywhere. Maybe you have a hint for me? :)

Best,
Ana

[Richard]

Dear Ana @anamsp

This is possible with the help of some Custom CSS added within 'Lay Options - Custom CSS & HTML'

However there would be two levels of difficulty i can see.
To have the images fade at 0.5 Opacity is fine and if you wish i can help with that, However the way that the thumbnails work right now is a bit different.

The image itself is not affected - there is this <span> box placed over the image with the background-color that you set.

When you hover - this box gets Opacity:0.5 giving this nice hue over your image.
You would need to add this <span> box and its css properties to all other images if you wanted this.

Unsure about time taken to achieve the second option - it may be easy, i would just some time to sit and do it :)
Let me know & best wishes

Richard

[anamsp]

@Richard-K Hi, sorry for the late reply, I completely forgot about my post. As my client is going to add new projects on their own in the future, I think that the easier option would make more sense. It would be awesome if you could help me to achieve the images to fade at 0.5, color:#9cae9e (if possible).
Thanks a lot for your help! :)

[Richard]

Dear @anamsp

No worries , we all come in and out of the forum from time to time :)

If i could just have a think about it and get back to you shortly if thats ok?
Best wishes and 25 days ago it was 2020 so Happy 2021
Thank you for using Lay Theme in the new year Ana

[Richard]

Dear Ana @anamsp

What settings do you currently have in Customize > Project Thumbnails > Project Thumbnail on Mouseover?

( a quick screen shot will do :)

[anamsp]

Hi Richard, thanks for the effort!
Wish you all the best for 2021 :)

[anamsp]

Hi @Richard-K did you have time to take a look at the hover settings? :) Best, Ana

[Richard]

Dear @anamsp

If you need the colour overlay on hover it gets a bit more tricky as this is a <span> overlay - to get all the effects without the colouring:

.special:hover{
    filter: blur(2px);
    -webkit-filter: blur(2px);
    -moz-filter: blur(2px);
    -ms-filter: blur(2px);
    -o-filter: blur(2px);
    opacity: 0.5;
    transition: all 400ms ease-out;
}

When you want the image to act the same as project Thumbnails when hovered > right-click & give it a 'custom class' in my example i gave it

special

The above code can be added to 'CSS' in customizer or through ' Lay Options - Custom CSS & HTML'

Hope this helps @anamsp & have a wonderful day, sorry for the delay!

Best
Richard