Object Position

Utility	Properties
op-b	object-position: bottom;
op-c	object-position: center;
op-l	object-position: left;
op-lb	object-position: left bottom;
op-lt	object-position: left top;
op-r	object-position: right;
op-rb	object-position: right bottom;
op-rt	object-position: right top;
op-t	object-position: top;

This example showcases various object-position utilities:

• The bottom object position utility aligns the object to the bottom edge of the container.
• The center object position utility centers the object within the container.
• The left object position utility aligns the object to the left edge of the container.
• The right object position utility aligns the object to the right edge of the container.
• The top object position utility aligns the object to the top edge of the container.

<div class="d-g g-1 gtc-3">
  <img class="d-24 of-none op-lt rad-1" src="https://picsum.photos/300?image=870" />
  <img class="d-24 of-none op-t rad-1" src="https://picsum.photos/300?image=870" />
  <img class="d-24 of-none op-rt rad-1" src="https://picsum.photos/300?image=870" />
  <img class="d-24 of-none op-l rad-1" src="https://picsum.photos/300?image=870" />
  <img class="d-24 of-none op-c rad-1" src="https://picsum.photos/300?image=870" />
  <img class="d-24 of-none op-r rad-1" src="https://picsum.photos/300?image=870" />
  <img class="d-24 of-none op-lb rad-1" src="https://picsum.photos/300?image=870" />
  <img class="d-24 of-none op-b rad-1" src="https://picsum.photos/300?image=870" />
  <img class="d-24 of-none op-rb rad-1" src="https://picsum.photos/300?image=870" />
</div>

Conditional styles

Learn how to override existing utilities based on the user’s screen size or other factors, such as hover states.

Breakpoint variant

You can combine responsive breakpoints like sm:op-*,md:op-*, lg:op-*, and xxl:op-* allows targeting specific utilities in different viewports.

<div class="op-l md:op-r ..."></div>

Hover variant

Alternatively, you can apply :hover by using h:op-* utility to override elements and change their values when hovering over them.

<div class="op-l h:op-r ..."></div>