Image Styling in CSS
? Image Styling in CSS
CSS gives you many ways to style images to improve the look and fit them perfectly into your design.
Common CSS Properties for Images
| Property | Description | Example |
|---|---|---|
width / height | Resize the image | width: 200px; height: auto; |
border-radius | Round corners or make circle | border-radius: 50%; |
box-shadow | Add shadow around the image | box-shadow: 0 4px 8px rgba(0,0,0,0.3); |
object-fit | Control how image fits its container | object-fit: cover; |
filter | Apply effects like blur, grayscale, etc. | filter: grayscale(100%); |
opacity | Make image transparent | opacity: 0.8; |
border | Add borders | border: 2px solid #333; |
transform | Rotate, scale, skew, etc. | transform: rotate(10deg); |
cursor | Change cursor on hover | cursor: pointer; |
transition | Smooth animations on hover or change | transition: transform 0.3s ease; |
Example: Stylish Profile Picture
<img src="profile.jpg" alt="Profile" class="profile-pic">.profile-pic { width: 150px; height: 150px; border-radius: 50%; object-fit: cover; border: 3px solid #3498db; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); transition: transform 0.3s ease;}.profile-pic:hover { transform: scale(1.1); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3); cursor: pointer;}Tips
Use
object-fit: coverto maintain aspect ratio while filling the container.Combine
border-radiusandbox-shadowfor nice rounded images with depth.Use
filterto apply artistic effects.Add
transitionto animate style changes smoothly on hover or focus.
Want a custom image styling example or help with effects like hover zoom, grayscale toggle, or frame?
