Interactive grids of images for Cargo website (custom HTML/CSS)

This video is an addition to the previous one, where I'm showing how to swap images on hover. Here we will apply this hover effect to a grid of elements.

You will be able to create interactive cards for your e-commerce website or use it for any other need.

[rosalynbecicka]

By the way! this still works with the new interface. I was overjoyed to make this work

[annam]

year on and i am still using this <3 thanks so much for these tutorials, these little tutorials really help me elevate my website <3

[directedbyfincher]

Thank you so, so much for this tutorial. I love Cargo and have had an account for a really long time, but customizations can be little difficult to figure out and this was so helpful for what I'm working on!!

[waterboi]

excellent tutorial!! you're helping me soooo much!

[melisaramirez]

hi! it worked perfectly, your tutorials are really great so thank you thank you thank you (:

Now this page is on stack mode with others and now appears a the top of the page not respecting the order of pages.. should i need to add something on the css to correct this?
Also on the Design tab i have the option of "Images animate when scroll" Active cause it works nice on the majority of my pages except for this one...how do i deactivate this option only in this page? For the images to load and stand still.
Thanks again!

[geotnk]

Great tutorial! Is it possible to have text only on one side of the grid?

[bayleehuff]

I love your tutorials so much!! Any chance you could PLEASEEE post this tutorial but for Cargo 3? I would be so so appreciative.

[ananymous]

Can you make a tutorial for draggable elements? It just does not work whereas they provided the code. It’s frustrating

[MounaChahin]

Thank you so much for the tutorial! I was wondering how it would work if I am using the freeform layout instead of the grid. Is it possible to have different hover images in a non-grid structure?

[kljeli]

This is such a nice tutorial video! I would like to know how to hover the text on the image when the mouse attaches it to the image.

[antoniaschwaiger]

Thank you so much its a great tutorial. One question: if I have a responsive layout how can I adapt this to the mobile version then?

[harryboulter]

Hey thank you so much for the tutorial! I was just wondering that when I completed this and came out of my admin page I noticed that it was adding an animation to the images on hover. I am not sure why this is happening and wondered if it is to do with cargo as I can't find any reason why this should be happening?

[olaolastudio]

Thank you for these tutorials, they're incredibly helpful.

I would like to see one about using background images (not full screen) in a marquee-type way. Right now I'm only able to have images in a slideshow format via "Backdrop" menu but I can't select the size of each image. Any chance you've tried that?

[bratzbby]

How would I get it to display the entire row instead of just one item in the second row? is this possible?

[elihei]

if you want to do an gif instead of an img. how would that work? just use the gif in the {image xxx} ?

[mimoto_channel]

Hey, I don't know if anyone will see this but:

The hover works perfectly in the ADMIN website, but once I go to the direct link, it doesnt work anymore ...

Anyone has an answer?

[newos.]

Hey ! i used your method and it works thank you. Do you know how to make it work with 3 images ?? Id like the image to go from Image 1 to Image 2 to Image 3 on hover but i cant figure out how to do it on CSS. Any help would be appreciated :)

[garrettobrochta]

Firstly, I really appreciate your videos! Cargo is a bit of a CSS beast and your tutorials have been super helpful.

I was wondering if you had a solution to prevent the images from flickering upon first hover. I noticed some articles mentioning loading the image on load to avoid this. Thanks :)

[linacaicedo]

I've tried it many times, but it's not working for me, unfortunately :((( Is anyone else struggling too?