Javascript

Photo Filter Website: Creating an Exclusive Filter

Creating an Exclusive Filter in a Photo Filter Website

✅ What does “exclusive filter” mean?

It means when a user selects one filter (like grayscale), all other filters (like sepia, blur, brightness) are disabled or reset. Only one effect is visible at a time.

Approach

  1. Use radio buttons or select dropdown to allow one filter at a time.

  2. When a filter is selected:

    • Set that CSS filter on the image.

    • Clear/reset any other filters.

Example: Filter with Radio Buttons

HTML

html
<h2>Choose a Filter:</h2>

<label><input type="radio" name="filter" value="none" checked> None</label>
<label><input type="radio" name="filter" value="grayscale"> Grayscale</label>
<label><input type="radio" name="filter" value="sepia"> Sepia</label>
<label><input type="radio" name="filter" value="blur"> Blur</label>
<label><input type="radio" name="filter" value="invert"> Invert</label>

<br><br>

<img id="photo" src="https://images.unsplash.com/photo-1503023345310-bd7c1de61c7d" alt="Sample Photo" style="max-width: 100%; border-radius: 8px;" />

JavaScript

js
const photo = document.getElementById('photo');
const filterRadios = document.querySelectorAll('input[name="filter"]');

filterRadios.forEach(radio => {
radio.addEventListener('change', () => {
switch (radio.value) {
case 'none':
photo.style.filter = 'none';
break;
case 'grayscale':
photo.style.filter = 'grayscale(100%)';
break;
case 'sepia':
photo.style.filter = 'sepia(100%)';
break;
case 'blur':
photo.style.filter = 'blur(4px)';
break;
case 'invert':
photo.style.filter = 'invert(100%)';
break;
}
});
});

Optional: Add Transitions

Make it smooth by adding CSS:

css
img {
transition: filter 0.4s ease;
}

Result

  • Selecting one filter instantly removes any previously applied ones.

  • Perfect for photo apps where you want a single, clear filter effect.

Want More?

You could extend this to:

  • Show filter previews as thumbnails

  • Use a dropdown instead of radio buttons

  • Combine this with image uploads

Related Posts

Leave a Reply

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