Advanced Image CSS

Images can have borders, shadows, rounded corners, and hover effects. Always set max-width: 100% so images shrink on mobile.

Image Styling

Images can have borders, shadows, rounded corners, and hover effects. Always set max-width: 100% so images shrink on mobile.

Real-life example: Styling an image is like choosing a frame and mat for a photo before hanging it on the wall.

Styled image

img {
  max-width: 100%;
  height: auto;
  display: block;
}

.photo {
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12);
}

Image Modal Idea & Centering

A modal is a popup layer over the page. CSS positions it fixed in the center with a dark backdrop. JavaScript usually opens/closes it — CSS handles the look.

Real-life example: A modal is like a magnifying glass sheet placed over a book — the page is still there, but you focus on one big image.

Centered modal (CSS)

.modal {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(15, 23, 42, 0.7);
  padding: 1rem;
}

.modal img {
  max-width: min(90vw, 700px);
  max-height: 85vh;
  border-radius: 8px;
}

.center-img-wrap {
  display: grid;
  place-items: center;
  min-height: 240px;
}

CSS Filters

filter changes how an image looks — blur, grayscale, brightness, contrast. Hover filters are a simple way to add polish.

Real-life example: filter: grayscale is like a black-and-white TV. blur is like looking through frosted glass.

Filter examples

.thumb {
  filter: grayscale(30%);
  transition: filter 0.3s ease;
}

.thumb:hover {
  filter: none;
}

.soft-bg {
  filter: blur(4px) brightness(0.9);
}

Shapes (clip-path) & object-fit

clip-path cuts an element into shapes like circles or slanted edges. object-fit controls how an image fills its box — cover crops nicely, contain shows the full image.

Real-life example: clip-path is like cutting paper with scissors into a circle. object-fit: cover is like cropping a photo to fill a frame without stretching faces.

clip-path and object-fit

.avatar {
  width: 96px;
  height: 96px;
  object-fit: cover;
  object-position: center top;
  clip-path: circle(50%);
}

.banner-img {
  width: 100%;
  height: 220px;
  object-fit: cover;
  object-position: center;
}

.slant {
  clip-path: polygon(0 0, 100% 0, 100% 85%, 0 100%);
}

Masking (intro)

mask-image hides parts of an element using another image or gradient. It is similar to clip-path but can use soft edges.

Real-life example: Masking is like a stencil — paint only goes through the cut-out shape.

Simple gradient mask

.fade-bottom {
  mask-image: linear-gradient(to bottom, black 60%, transparent);
  -webkit-mask-image: linear-gradient(to bottom, black 60%, transparent);
}