Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Selected Reading
How to style images with CSS?
CSS provides numerous properties to style and enhance images on web pages. You can control dimensions, transparency, borders, filters, and positioning to create visually appealing designs.
Basic Image Styling Properties
Common CSS properties for styling images include:
- width/height: Control image dimensions
- opacity: Set transparency (0 to 1)
- border: Add borders around images
- border-radius: Create rounded corners
- filter: Apply visual effects
Setting Image Opacity
The opacity property controls image transparency, with values from 0 (fully transparent) to 1 (fully opaque):
<!DOCTYPE html>
<html>
<head>
<style>
.transparent-image {
opacity: 0.5;
border: 2px solid #333;
}
</style>
</head>
<body>
<img src="/css/images/logo.png" alt="Logo" class="transparent-image">
</body>
</html>
Responsive Image Sizing
Make images responsive and maintain aspect ratio:
<!DOCTYPE html>
<html>
<head>
<style>
.responsive-image {
width: 100%;
max-width: 400px;
height: auto;
border-radius: 10px;
}
</style>
</head>
<body>
<img src="/css/images/sample.jpg" alt="Sample" class="responsive-image">
</body>
</html>
Advanced Image Effects
Apply filters and transformations for modern styling:
<!DOCTYPE html>
<html>
<head>
<style>
.styled-image {
width: 300px;
height: 200px;
object-fit: cover;
filter: brightness(0.8) contrast(1.2);
transition: transform 0.3s ease;
}
.styled-image:hover {
transform: scale(1.05);
filter: brightness(1) contrast(1.3);
}
</style>
</head>
<body>
<img src="/css/images/nature.jpg" alt="Nature" class="styled-image">
</body>
</html>
Common Styling Patterns
| Property | Purpose | Example Value |
|---|---|---|
opacity |
Transparency | 0.5 (50% transparent) |
border-radius |
Rounded corners | 50% (circular) |
object-fit |
How image fits container | cover, contain |
filter |
Visual effects | blur(2px), grayscale(100%) |
Conclusion
CSS offers powerful tools for image styling, from basic opacity and dimensions to advanced filters and hover effects. Use opacity for transparency, responsive sizing for mobile compatibility, and filters for creative effects.
Updated on: 2026-03-15T23:18:59+05:30
283 Views
Advertisements