grid with random animation

Site URL: https://www.oryxdentalsoftware.com/new-page-2-1

Hello, 

I used the code of this masonry gallery from code pen and it's good: https://codepen.io/marcobiedermann/pen/vYYyVzK

But I want to animate each picture to fade and show another picture under it after a delay. 

Similar to this website: https://www.hellotend.com/  (section 5) 

I inspected the code & I think they overlapped 2 images inside each cell and it fades to show the one under it?

Can someone help me with editing the code Block to overlay the images and animate it in js?

Yes. They added 2 images, initial image + hover image. Then they used JavaScript code to make image change effect. This will require a lot of code + Business Plan or higher.

I am on a Business plan, can you help me with it? 

On 1/26/2022 at 4:02 PM, Yaraf said:

I am on a Business plan, can you help me with it? 

 

I can't help with this, it needs a lot of code.

If you need hover >> change image, I can help.

yes please

On 1/25/2022 at 3:55 PM, Yaraf said:

Site URL: https://www.oryxdentalsoftware.com/new-page-2-1

Hello, 

I used the code of this masonry gallery from code pen and it's good: https://codepen.io/marcobiedermann/pen/vYYyVzK

But I want to animate each picture to fade and show another picture under it after a delay. 

Similar to this website: https://www.hellotend.com/  (section 5) 

I inspected the code & I think they overlapped 2 images inside each cell and it fades to show the one under it?

Can someone help me with editing the code Block to overlay the images and animate it in js?

 

Can you check url? The page doesn't exist now

https://oryxdentalsoftware.com/homepage-new-1

On 1/31/2022 at 6:17 PM, Yaraf said:

https://oryxdentalsoftware.com/homepage-new-1

Add to Design > Custom CSS

.gallery__item:nth-child(1):hover img {
    content: url(https://cdn.pixabay.com/photo/2022/01/20/14/16/ladybug-6952412__480.jpg);
}
.gallery__item:nth-child(2):hover img {
    content: url(https://cdn.pixabay.com/photo/2022/01/24/23/04/mountains-6964950__340.jpg);
}
.gallery__item:nth-child(3):hover img {
    content: url(https://cdn.pixabay.com/photo/2022/01/23/20/50/woman-6961929__340.jpg);
}
.gallery__item:nth-child(4):hover img {
    content: url(https://cdn.pixabay.com/photo/2022/01/20/14/16/ladybug-6952412__480.jpg);
}