CSS Filter

KonFusion

Hey folks.

I'm trying to filter images/links using just CSS.

Basically, for example, imagine a page with various images. Some are of cats, some of dogs, some of birds.

At the top of the page is a cat, dog, and bird. When you click the cat, the other images fade away/disappear, and only the images of the cats are displayed. (and likewise for the others).

Hope that explains it ok :pac:

I know it can be done. I've done it before but I've completely forgotten how.

Thanks.

tricky D

Google for something like 'show hide fade div onclick' for solutions.

KonFusion

tricky D wrote: »

Google for something like 'show hide fade div onclick' for solutions.

Thanks for the tip, but all I can find are JQ or JS solutions.

tatrman

KonFusion wrote: »

Hey folks.

I'm trying to filter images/links using just CSS.

Basically, for example, imagine a page with various images. Some are of cats, some of dogs, some of birds.

At the top of the page is a cat, dog, and bird. When you click the cat, the other images fade away/disappear, and only the images of the cats are displayed. (and likewise for the others).

Hope that explains it ok :pac:

I know it can be done. I've done it before but I've completely forgotten how.

Thanks.

I understand you are looking for something like this. The reason that you didn't find anything is that it is not possible using only CSS. You will have to go into javascript here.

solarith

CSS is just for styling, so logic is handled elsewhere. A way I've done this is using jQuery to select the elements and alter their CSS from there.

tricky D

KonFusion wrote: »

Thanks for the tip, but all I can find are JQ or JS solutions.

CSS won't capture the click event so you have to use JS for that.

KonFusion

Found what I was looking for.

Thanks for the replies folks

Edit: Here's the article and source for anyone interested.

And this may also be of interest.

Happy coding.