CSS Image Styling

Basic Image Properties

img {
    width: 200px;
    height: 150px;
}

img {
    border: 3px solid #007cba;
}

img {
    border-radius: 15px;
}

img {
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

🔹 Responsive Images

Responsive image implementation ensures optimal visual presentation across diverse screen sizes and resolutions. Key techniques include using the srcset attribute to serve appropriately sized images, sizes attribute for viewport-based selection, and CSS-based scaling with max-width: 100%. Modern approaches incorporate the picture element for art direction and format selection, serving WebP images to supported browsers while providing fallbacks. These responsive strategies significantly improve page load performance, reduce data usage for mobile users, and maintain visual quality across devices. Additionally, lazy loading with the loading="lazy" attribute further enhances performance by deferring off-screen image loading.

/* Responsive image that scales with container */
.responsive-img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* Maintain aspect ratio */
.aspect-ratio-img {
    width: 100%;
    height: 200px;
    object-fit: cover;
}

<img src="/placeholder.png" 
     alt="Landscape" 
     class="responsive-img">

Output:

🔹 Image Borders and Effects

Image borders and effects enhance visual presentation through CSS properties that go beyond basic outlines. Developers can create double borders using border and outline properties, gradient borders with background-clip techniques, and shadow effects using box-shadow for depth perception. Advanced effects include inner shadows, multiple layered shadows, and animated border transitions that respond to user interactions. These visual enhancements help images stand out within content, create visual separation from backgrounds, and reinforce brand identity through consistent styling. Performance considerations include using CSS-based effects rather than image-based borders to maintain fast loading times and perfect scalability.

/* Modern card-style image */
.card-image {
    width: 250px;
    height: 180px;
    border-radius: 12px;
    box-shadow: 0 8px 25px rgba(0,0,0,0.15);
    transition: transform 0.3s ease;
}

.card-image:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 35px rgba(0,0,0,0.2);
}

/* Circular image */
.circular-image {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    border: 4px solid #ff6b6b;
    object-fit: cover;
}

<img src="/placeholder.png" 
     alt="Office" 
     class="card-image">

<img src="/placeholder.png" 
     alt="Profile" 
     class="circular-image">

Output:

🔹 Image Opacity and Overlays

Image opacity and overlay techniques control transparency to create sophisticated visual layering effects. Using the opacity property, rgba() color values, and CSS blend modes, developers can implement text-over-image readability solutions, hover-state reveals, and background dimming for modal windows. The mix-blend-mode property enables creative color interactions between overlapping elements, while pseudo-elements like ::before and ::after create gradient or solid overlays without additional HTML. These techniques are essential for accessible design, ensuring sufficient contrast between text and background images, and creating visually engaging hero sections that maintain readability across different screen sizes.

/* Image with opacity */
.faded-image {
    opacity: 0.7;
    transition: opacity 0.3s ease;
}

.faded-image:hover {
    opacity: 1;
}

/* Image with overlay */
.image-overlay {
    position: relative;
    display: inline-block;
}

.image-overlay::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(45deg, rgba(0,123,255,0.3), rgba(255,107,107,0.3));
    border-radius: 8px;
}

<div class="image-overlay">
    <img src="/placeholder.png" 
         alt="City" 
         style="border-radius: 8px;">
</div>

Output: