The application provides multiple image editing effects such as brightness, blur, contrast, grayscale, hue rotation, inversion, opacity, saturation, sepia and drop shadow. Users can select different filter options through an interactive interface, and the selected effect is applied to the displayed image. The project uses hidden radio buttons and associated labels to control the filter selection, allowing the interaction to be handled entirely through CSS.
The project was developed using HTML5 for creating the webpage structure and form controls, while CSS3 was used extensively for styling, layout, responsive design and implementing the image filter effects. Flexbox and grid based layouts were used to organize the interface and filter controls.
Through this project, I gained practical experience with the CSS filter property and functions such as brightness, blur, contrast, grayscale, hue rotate, invert, opacity, saturate, sepia and drop shadow. I also practiced advanced CSS selectors, sibling selectors, hidden form inputs, labels, fieldsets and legends while creating interactive behavior without JavaScript.
The project helped me understand how CSS can be used beyond basic styling to create interactive visual experiences. It also strengthened my understanding of responsive layouts and organizing larger CSS based projects.
This is a learning project focused on CSS experimentation. Currently, the Save button is non functional, uploaded images are not supported and filters are applied individually rather than being stacked. Future improvements could include JavaScript based image uploads, combined filters and downloadable edited images.