CSS — Style Images

The baseline image style

img {
    max-width: 100%;
    height: auto;          /* the two-line responsive guarantee */
}

Everything else builds on this.

Framing patterns

Soft card frame

.framed {
    border-radius: 12px;
    box-shadow: 0 4px 16px rgba(0,0,0,.15);
}

Border + padding "photo print"

.polaroid {
    background: white;
    padding: 10px 10px 40px;    /* thick bottom = classic print */
    box-shadow: 0 6px 20px rgba(0,0,0,.2);
    transform: rotate(-2deg);
}

(Tilted white-framed photo — instant nostalgia.)

Brand ring avatar

.avatar {
    border-radius: 50%;
    border: 3px solid #fff;
    box-shadow: 0 0 0 3px var(--brand);   /* double ring via shadow */
}

Thumbnails & hover zoom

.thumb {
    overflow: hidden;          /* clip the zooming child */
    border-radius: 8px;
}
.thumb img {
    transition: transform .3s ease;
}
.thumb:hover img {
    transform: scale(1.08);    /* grows INSIDE its frame */
}

The gallery-standard effect: zoom happens inside overflow:hidden, so layout never shifts.

Grayscale-to-color on hover

.gallery-img {
    filter: grayscale(100%);
    transition: filter .3s;
}
.gallery-img:hover {
    filter: grayscale(0);
}

Other useful filters:

filter: brightness(1.1);
filter: contrast(1.1) saturate(1.2);
filter: blur(2px);                 /* behind-modal backgrounds */
filter: drop-shadow(0 4px 8px rgba(0,0,0,.3));  /* follows PNG transparency! */

drop-shadow hugs transparent shapes (icons/logos) where box-shadow draws a rectangle.

Figure + caption pairing

figure { margin: 0; }
figure img {
    width: 100%;
    border-radius: 8px;
}
figcaption {
    font-size: .85rem;
    color: #64748b;
    margin-top: 8px;
    text-align: center;
}

Semantic pairing beats a bare <p> under an <img> — screen readers and CSS treat them as one unit.

Alignment recipes

/* center any image */
.center { display: block; margin-inline: auto; }

/* float text around small images */
.float-left  { float: left;  margin: 0 16px 8px 0; }

Overlay caption on hover

.overlay-card { position: relative; }
.overlay-card figcaption {
    position: absolute;
    inset: auto 0 0 0;
    padding: 24px 12px 12px;
    background: linear-gradient(transparent, rgba(0,0,0,.7));
    color: white;
    opacity: 0;
    transition: opacity .25s;
}
.overlay-card:hover figcaption { opacity: 1; }

(Gradient scrim rises with the caption from the photo's bottom edge.)

Mini Practice

1. Three framing styles on one photo.
2. Hover-zoom thumbnail grid.
3. Grayscale gallery that colors on hover.
4. drop-shadow on a transparent logo vs box-shadow — compare.
5. Figure/figcaption with hover-rising gradient caption.

Next: responsive images →