CSS Images

Learn CSS image styling techniques including sizing, positioning, filters, effects, and responsive images for modern web design.

CSS provides powerful tools for styling and manipulating images to create visually appealing, responsive designs.

Image Sizing

img {
  width: 100%;
  height: auto; /* Maintains aspect ratio */
}

.fixed-size {
  width: 300px;
  height: 200px;
  object-fit: cover; /* Prevents distortion */
}

.max-width {
  max-width: 100%;
  height: auto;
}

Object Fit

Controls how images fit within their containers:

.cover {
  width: 300px;
  height: 200px;
  object-fit: cover; /* Crops to fill container */
}

.contain {
  object-fit: contain; /* Fits entire image, may leave space */
}

.fill {
  object-fit: fill; /* Stretches to fill (may distort) */
}

.scale-down {
  object-fit: scale-down; /* Smaller of contain or none */
}

.none {
  object-fit: none; /* Original size */
}

Object Position

.positioned {
  object-fit: cover;
  object-position: top; /* top, bottom, left, right, center */
}

.custom-position {
  object-position: 25% 75%; /* x% y% */
}

Border Radius

.rounded {
  border-radius: 8px;
}

.circle {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  object-fit: cover;
}

.custom-radius {
  border-radius: 20px 0 20px 0; /* top-left top-right bottom-right bottom-left */
}

Image Borders

.bordered {
  border: 4px solid #007bff;
  padding: 10px;
  background: white;
}

.frame {
  border: 10px solid white;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

CSS Filters

.grayscale {
  filter: grayscale(100%);
}

.blur {
  filter: blur(5px);
}

.brightness {
  filter: brightness(150%);
}

.contrast {
  filter: contrast(200%);
}

.sepia {
  filter: sepia(80%);
}

.saturate {
  filter: saturate(200%);
}

.hue-rotate {
  filter: hue-rotate(90deg);
}

.invert {
  filter: invert(100%);
}

/* Multiple filters */
.multi-filter {
  filter: brightness(110%) contrast(120%) saturate(130%);
}

Hover Effects

Zoom

.img-zoom {
  overflow: hidden;
}

.img-zoom img {
  transition: transform 0.3s ease;
}

.img-zoom:hover img {
  transform: scale(1.1);
}

Grayscale to Color

.img-hover-color img {
  filter: grayscale(100%);
  transition: filter 0.3s ease;
}

.img-hover-color:hover img {
  filter: grayscale(0%);
}

Overlay

.img-overlay {
  position: relative;
}

.img-overlay::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.img-overlay:hover::after {
  opacity: 1;
}

Responsive Images

.responsive-img {
  width: 100%;
  height: auto;
  max-width: 100%;
}

@media (max-width: 768px) {
  .desktop-img {
    display: none;
  }
  
  .mobile-img {
    display: block;
  }
}

Image Gallery

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 16px;
}

.gallery img {
  width: 100%;
  height: 250px;
  object-fit: cover;
  border-radius: 8px;
  transition: transform 0.3s ease;
}

.gallery img:hover {
  transform: scale(1.05);
}

Image with Caption

.figure {
  margin: 0;
  position: relative;
}

.figure img {
  width: 100%;
  border-radius: 8px;
}

.figure figcaption {
  padding: 10px;
  text-align: center;
  font-style: italic;
  color: #666;
}

Aspect Ratio

.aspect-ratio {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%; /* 16:9 aspect ratio */
}

.aspect-ratio img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

Image Shapes

.img-circle {
  border-radius: 50%;
}

.img-rounded {
  border-radius: 10px;
}

.img-thumbnail {
  border: 4px solid #ddd;
  border-radius: 4px;
  padding: 4px;
  background-color: white;
}

Image Overlay Text

.img-text-overlay {
  position: relative;
}

.img-text-overlay img {
  display: block;
  width: 100%;
}

.img-text-overlay .text {
  position: absolute;
  bottom: 20px;
  left: 20px;
  color: white;
  font-size: 24px;
  font-weight: bold;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
}

Lazy Loading

img[loading="lazy"] {
  opacity: 0;
  transition: opacity 0.3s ease;
}

img[loading="lazy"].loaded {
  opacity: 1;
}

Background Images (via CSS)

.bg-image {
  background-image: url('image.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  height: 400px;
}

.bg-fixed {
  background-attachment: fixed; /* Parallax effect */
}

Image Masks

.masked-img {
  mask-image: linear-gradient(to bottom, black 50%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, black 50%, transparent 100%);
}

.circle-mask {
  mask-image: radial-gradient(circle, black 50%, transparent 50%);
}

Image Comparison

.img-compare {
  position: relative;
  overflow: hidden;
}

.img-compare img {
  display: block;
  width: 100%;
}

.img-compare .after {
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  overflow: hidden;
}

Performance Tips

Image Performance

Use appropriate image formats (WebP, AVIF)
Compress images before upload
Use responsive images with srcset
Implement lazy loading
Use CSS transforms instead of changing dimensions
Avoid large filter operations
Consider using CSS for simple shapes
Optimize images for web (reduce file size)

Best Practices

Image Best Practices

Always include alt text for accessibility
Use object-fit to prevent distortion
Maintain aspect ratios
Optimize images for web
Use lazy loading for below-the-fold images
Provide width and height attributes
Use responsive images
Consider loading states
Test on different screen sizes
Use appropriate file formats

Accessibility

<!-- Always include alt text -->
<img src="photo.jpg" alt="Descriptive text" />

<!-- Decorative images -->
<img src="decorative.jpg" alt="" role="presentation" />

Master image styling to create beautiful, performant visual experiences!

CSS provides powerful tools for styling and manipulating images to create visually appealing, responsive designs.

Image Sizing

img {
  width: 100%;
  height: auto; /* Maintains aspect ratio */
}

.fixed-size {
  width: 300px;
  height: 200px;
  object-fit: cover; /* Prevents distortion */
}

.max-width {
  max-width: 100%;
  height: auto;
}

Object Fit

Controls how images fit within their containers:

.cover {
  width: 300px;
  height: 200px;
  object-fit: cover; /* Crops to fill container */
}

.contain {
  object-fit: contain; /* Fits entire image, may leave space */
}

.fill {
  object-fit: fill; /* Stretches to fill (may distort) */
}

.scale-down {
  object-fit: scale-down; /* Smaller of contain or none */
}

.none {
  object-fit: none; /* Original size */
}

Object Position

.positioned {
  object-fit: cover;
  object-position: top; /* top, bottom, left, right, center */
}

.custom-position {
  object-position: 25% 75%; /* x% y% */
}

Border Radius

.rounded {
  border-radius: 8px;
}

.circle {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  object-fit: cover;
}

.custom-radius {
  border-radius: 20px 0 20px 0; /* top-left top-right bottom-right bottom-left */
}

Image Borders

.bordered {
  border: 4px solid #007bff;
  padding: 10px;
  background: white;
}

.frame {
  border: 10px solid white;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

CSS Filters

.grayscale {
  filter: grayscale(100%);
}

.blur {
  filter: blur(5px);
}

.brightness {
  filter: brightness(150%);
}

.contrast {
  filter: contrast(200%);
}

.sepia {
  filter: sepia(80%);
}

.saturate {
  filter: saturate(200%);
}

.hue-rotate {
  filter: hue-rotate(90deg);
}

.invert {
  filter: invert(100%);
}

/* Multiple filters */
.multi-filter {
  filter: brightness(110%) contrast(120%) saturate(130%);
}

Hover Effects

Zoom

.img-zoom {
  overflow: hidden;
}

.img-zoom img {
  transition: transform 0.3s ease;
}

.img-zoom:hover img {
  transform: scale(1.1);
}

Grayscale to Color

.img-hover-color img {
  filter: grayscale(100%);
  transition: filter 0.3s ease;
}

.img-hover-color:hover img {
  filter: grayscale(0%);
}

Overlay

.img-overlay {
  position: relative;
}

.img-overlay::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.img-overlay:hover::after {
  opacity: 1;
}

Responsive Images

.responsive-img {
  width: 100%;
  height: auto;
  max-width: 100%;
}

@media (max-width: 768px) {
  .desktop-img {
    display: none;
  }
  
  .mobile-img {
    display: block;
  }
}

Image Gallery

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 16px;
}

.gallery img {
  width: 100%;
  height: 250px;
  object-fit: cover;
  border-radius: 8px;
  transition: transform 0.3s ease;
}

.gallery img:hover {
  transform: scale(1.05);
}

Image with Caption

.figure {
  margin: 0;
  position: relative;
}

.figure img {
  width: 100%;
  border-radius: 8px;
}

.figure figcaption {
  padding: 10px;
  text-align: center;
  font-style: italic;
  color: #666;
}

Aspect Ratio

.aspect-ratio {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%; /* 16:9 aspect ratio */
}

.aspect-ratio img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

Image Shapes

.img-circle {
  border-radius: 50%;
}

.img-rounded {
  border-radius: 10px;
}

.img-thumbnail {
  border: 4px solid #ddd;
  border-radius: 4px;
  padding: 4px;
  background-color: white;
}

Image Overlay Text

.img-text-overlay {
  position: relative;
}

.img-text-overlay img {
  display: block;
  width: 100%;
}

.img-text-overlay .text {
  position: absolute;
  bottom: 20px;
  left: 20px;
  color: white;
  font-size: 24px;
  font-weight: bold;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
}

Lazy Loading

img[loading="lazy"] {
  opacity: 0;
  transition: opacity 0.3s ease;
}

img[loading="lazy"].loaded {
  opacity: 1;
}

Background Images (via CSS)

.bg-image {
  background-image: url('image.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  height: 400px;
}

.bg-fixed {
  background-attachment: fixed; /* Parallax effect */
}

Image Masks

.masked-img {
  mask-image: linear-gradient(to bottom, black 50%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, black 50%, transparent 100%);
}

.circle-mask {
  mask-image: radial-gradient(circle, black 50%, transparent 50%);
}

Image Comparison

.img-compare {
  position: relative;
  overflow: hidden;
}

.img-compare img {
  display: block;
  width: 100%;
}

.img-compare .after {
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  overflow: hidden;
}

Performance Tips

Image Performance

Use appropriate image formats (WebP, AVIF)
Compress images before upload
Use responsive images with srcset
Implement lazy loading
Use CSS transforms instead of changing dimensions
Avoid large filter operations
Consider using CSS for simple shapes
Optimize images for web (reduce file size)

Best Practices

Image Best Practices

Always include alt text for accessibility
Use object-fit to prevent distortion
Maintain aspect ratios
Optimize images for web
Use lazy loading for below-the-fold images
Provide width and height attributes
Use responsive images
Consider loading states
Test on different screen sizes
Use appropriate file formats

Accessibility

<!-- Always include alt text -->
<img src="photo.jpg" alt="Descriptive text" />

<!-- Decorative images -->
<img src="decorative.jpg" alt="" role="presentation" />

Master image styling to create beautiful, performant visual experiences!

CSS Images

On this page

CSS Images

On this page