CSS Advanced

CSS object-position

When object-fit: cover crops an image, object-position decides which part of the image stays visible. It sets the image focal point inside its box. This guide shows the syntax, keyword and percentage values, and live examples.

The object-position Property

object-position works together with object-fit. Once cover or contain has resized an image, object-position moves the image within its box so you control which region is shown. The default is 50% 50%, which centers the image.

img {
  width: 200px;
  height: 120px;
  object-fit: cover;
  object-position: top;    /* keep the top of the image */
}

Value Syntax

You provide one or two values. The first is the horizontal position, the second the vertical. You can mix keywords (left, center, right, top, bottom), percentages, or lengths.

Value	Meaning
50% 50%	Center (the default)
top	Horizontally centered, aligned to the top
right bottom	Bottom-right corner shown
0% 0%	Top-left corner shown
25px 10px	Offset by explicit lengths

Choosing the Focal Point

The three boxes below crop the same wide image to a square but keep a different region visible. This is how you keep a face or subject in frame after cropping.

Run this — same crop, different focal points

Example

<!DOCTYPE html>
<html>
<head>
<style>
  .row { display: flex; gap: 12px; }
  .row img {
    width: 120px;
    height: 120px;
    object-fit: cover;
    border-radius: 8px;
  }
  .top { object-position: top; }
  .center { object-position: center; }
  .bottom { object-position: bottom; }
</style>
</head>
<body>
  <div class="row">
    <img class="top"    src="https://picsum.photos/id/1011/300/500" alt="top">
    <img class="center" src="https://picsum.photos/id/1011/300/500" alt="center">
    <img class="bottom" src="https://picsum.photos/id/1011/300/500" alt="bottom">
  </div>
</body>
</html>

Animating the Focal Point

Because object-position accepts lengths and percentages, it can be transitioned. Hover the image below to pan across it.

Run this — hover to pan the crop

Example

<!DOCTYPE html>
<html>
<head>
<style>
  .pan {
    width: 260px;
    height: 140px;
    object-fit: cover;
    object-position: left center;
    transition: object-position .6s ease;
    border-radius: 10px;
  }
  .pan:hover { object-position: right center; }
</style>
</head>
<body>
  <img class="pan" src="https://picsum.photos/id/1015/600/300" alt="Hover to pan">
</body>
</html>

💡

object-position only does something visible when the image is being cropped, so it is nearly always used alongside object-fit: cover.

⚠️

Values behave like background-position: a single keyword sets one axis and the other defaults to center. Use two values when you need precise control of both axes.

Key points

object-position sets which region of a cropped image stays visible.
The default is 50% 50% (centered).
It accepts keywords, percentages and lengths for horizontal then vertical.
It is used together with object-fit, usually cover.
Because it accepts lengths, object-position can be transitioned and animated.