CSS tips on images you need to know

Hello Coders, hope you're all doing well. In this blog, I'll be sharing five important properties to keep in mind when working with images.



1. Object-fit : cover

This property allows the image to fill the entire container while maintaining its aspect ratio, making it particularly useful for profile images

2. Transform: scaleX(-1) / scaleY(-1).

To flip your image horizontally, use transform: scaleX(-1); for a vertical flip, use transform: scaleY(-1).



3. Filter: drop-shadow

This property adds shadows to images without backgrounds. For example: filter: drop-shadow(30px 10px 4px #3a3a3a);.



4. Filter: Opacity

This property adjusts the transparency of the image based on the specified percentage.




If you know of other tips/tricks, let me know in the comments. Thanks for reading


Previous Post Next Post