|

Add Filter Effect on image hover in Cargo Collective Website to make it attractive

We all know that Cargo Collective is very popular site builder among artist,deisgner, creative studio and other professionals becasue of its unique templates and advance funcationality but sometimes that is not enough and we want to to further in adding some cool effect 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 you website.So lets get started

filter effect on hover in cargo collective site builder tutorial

Add Filter Effect on image hover in Cargo Collective Site

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

If you want that all images present in 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 step to add 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.

Do you want to add more such cool effects and animation in your cargo website. Click now🔥

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

Here are the step to add filter effect in image on hover in 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.

Read about Cargo 3 – Cargo Collective New Powerful Site Editor😍😍😍

Thanks for reading this blog🚀

Similar Posts

Leave a Reply

Your email address will not be published. Required fields are marked *