-
Hajipur, Bihar, 844101
CSS
CSS Basics
CSS Styling Properties
-
CSS Box Model
-
CSS Margin
-
CSS Padding
-
CSS Borders
-
CSS Outline
-
CSS Height/Width
-
CSS Max-width
-
CSS Display
-
CSS Position
-
CSS Z-index
-
CSS Overflow
-
CSS Float
-
CSS Inline-block
-
CSS Align
-
CSS Box Sizing
-
CSS Text
-
CSS Fonts
-
CSS Icons
-
CSS Text Effects
-
CSS Web Fonts
-
CSS Colors
-
CSS Backgrounds
-
CSS Color Keywords
-
CSS Gradients
-
CSS Shadows
-
CSS Links
-
CSS Lists
-
CSS Tables
CSS Advanced Selectors & Features
-
CSS Combinators
-
CSS Pseudo-classes
-
CSS Pseudo-elements
-
CSS Attribute Selectors
-
CSS Specificity
-
CSS !important
-
CSS Units
-
CSS Variables
-
CSS @property
-
CSS Math Functions
CSS Media and Image Styling
-
CSS Image Styling
-
CSS Image Centering
-
CSS Image Filters
-
CSS Image Shapes
-
CSS object-fit
-
CSS object-position
-
CSS Masking
CSS Layout Techniques
-
CSS Website Layout
-
CSS Navigation Bar
-
CSS Dropdowns
-
CSS Image Gallery
-
CSS Counters
-
CSS Pagination
-
CSS Multiple Columns
-
CSS User Interface
CSS Flexbox
CSS Grid
CSS Responsive Design (RWD)
CSS Image Filters
🔹 What are CSS Image Filters?
CSS Image Filters are visual effects applied to images (or other elements) using the filter property. They allow you to adjust colors, blur, brightness, contrast, and more, directly in CSS without editing the image itself.
🔸 Common CSS Filter Functions
| Filter Function | Description | Example |
|---|---|---|
blur(px) |
Applies blur effect | filter: blur(5px); |
brightness(%) |
Adjusts brightness (0% = black) | filter: brightness(150%); |
contrast(%) |
Adjusts contrast (100% = default) | filter: contrast(200%); |
grayscale(%) |
Converts to grayscale (100% = full gray) | filter: grayscale(100%); |
invert(%) |
Inverts colors (100% = full inversion) | filter: invert(100%); |
opacity(%) |
Sets opacity level | filter: opacity(50%); |
saturate(%) |
Adjusts saturation | filter: saturate(200%); |
sepia(%) |
Applies sepia tone | filter: sepia(80%); |
drop-shadow(offsetX offsetY blurRadius color) |
Adds shadow | filter: drop-shadow(5px 5px 5px black); |
🔸 Example: Multiple Filters Combined
img {
filter: grayscale(50%) blur(2px) brightness(120%);
}
🔸 Using Filters with Transitions
img {
transition: filter 0.5s ease;
}
img:hover {
filter: brightness(150%) saturate(120%);
}
Practice Questions
Q1. Apply a 5px blur to all images.
Q2. Make images grayscale on hover.
Q3. Increase brightness to 120% on hover.
Q4. Add a drop shadow of 4px offset with black color.
Q5. Invert colors of an image completely.
Q6. Set image opacity to 60%.
Q7. Apply a sepia tone of 70%.
Q8. Saturate an image to 200% when hovered.
Q9. Combine grayscale and blur effects on images.
Q10. Use transition to animate filter changes smoothly.
CSS
CSS Basics
CSS Styling Properties
-
CSS Box Model
-
CSS Margin
-
CSS Padding
-
CSS Borders
-
CSS Outline
-
CSS Height/Width
-
CSS Max-width
-
CSS Display
-
CSS Position
-
CSS Z-index
-
CSS Overflow
-
CSS Float
-
CSS Inline-block
-
CSS Align
-
CSS Box Sizing
-
CSS Text
-
CSS Fonts
-
CSS Icons
-
CSS Text Effects
-
CSS Web Fonts
-
CSS Colors
-
CSS Backgrounds
-
CSS Color Keywords
-
CSS Gradients
-
CSS Shadows
-
CSS Links
-
CSS Lists
-
CSS Tables
CSS Advanced Selectors & Features
-
CSS Combinators
-
CSS Pseudo-classes
-
CSS Pseudo-elements
-
CSS Attribute Selectors
-
CSS Specificity
-
CSS !important
-
CSS Units
-
CSS Variables
-
CSS @property
-
CSS Math Functions
CSS Media and Image Styling
-
CSS Image Styling
-
CSS Image Centering
-
CSS Image Filters
-
CSS Image Shapes
-
CSS object-fit
-
CSS object-position
-
CSS Masking
CSS Layout Techniques
-
CSS Website Layout
-
CSS Navigation Bar
-
CSS Dropdowns
-
CSS Image Gallery
-
CSS Counters
-
CSS Pagination
-
CSS Multiple Columns
-
CSS User Interface
CSS Flexbox
CSS Grid
CSS Responsive Design (RWD)
