We all know that Cargo Collective is a very popular site builder among artists, designers, creative studios, and other professionals because of its unique templates and advanced functionality but sometimes that is not enough and we want to to further in adding some cool effects and animation for our cargo collective website to make it more unique.

So today in this blog we are going to learn how you can add different filter effects in your Cargo 2 website image will will give a feel-good effect to your website.So let’s get started

Add Filter Effect on image hover in Cargo Collective Site

First log into your cargo account and then create a page after that you can upload the image of your choice and then drag the image inside the cargo editor.

If you want all images present on your website should have this filter effect on hovering the image then you should add the filter hover CSS code in the global CSS editor.

Here are the steps to add a filter effect on hover in all images present on the website :

1. Click on the Design tab.
2. Navigate to the CSS editor.
3. Paste the provided filter hover CSS code.
4. Enjoy a uniform filter effect on all images when hovered across your website.

img:hover{
 filter: grayscale(100%);
}

You can choose other filter effects such –

1. filter: blur(5px);
2. filter: brightness(200%);
3. filter: contrast(200%);
4. filter: drop-shadow(8px 8px 10px gray);
5. filter: grayscale(100%);
6. filter: hue-rotate(90deg);
7. filter: invert(100%);
8. filter: opacity(30%);
9. filter: saturate(8);
10. filter: sepia(100%);
11. filter: contrast(200%) brightness(150%);

You can change the filter effect values per your choice.

But what if you want to add the filter effects only to the images present on the particular page.

Here are the steps to add a filter effect in an image by hovering on a particular page:

1. Navigate to the specific page.
2. Locate the “CODE VIEW” button at the bottom right.
3. Click on the “CODE VIEW” button.
4. Paste the provided code below, ensuring that you wrap the code inside <style> tags.
5. Click on “Save.”

<style>

img:hover{
 filter: grayscale(100%);
}

</style>

Now, the filter effect will only be applied to the images on the particular page.

I hope you have found this blog helpful. Thanks for reading🚀

If you have any questions or need help with your Cargo Site, feel free to ask in the discussion forum. We’re here to assist you!