Get Orange

Image

HTML

Add styling to images.

Basic

Apply classes directly to img tag or on a tag.

Katze Foxy
HTML 
    <img class="o-image" src="https://orangecss.com/images/thumbnails/cat.jpg" alt="Katze" />
<a href="#" class="o-image"><img src="https://orangecss.com/images/thumbnails/fox.jpg" alt="Foxy" /></a>

With shadow

Hedgy
HTML 
    <img class="o-image o-image--shadow" src="https://orangecss.com/images/thumbnails/hedgehog.jpg" alt="Hedgy" />

Rounded

Add border radius to image.

Katze Hedgy
HTML 
    <img class="o-image o-image--rounded" src="https://orangecss.com/images/thumbnails/square/cat-square.jpg" alt="Katze" />
<a href="#" class="o-image o-image--size-small o-image--rounded o-image--action">
  <img src="https://orangecss.com/images/thumbnails/hedgehog.jpg" alt="Hedgy" />
</a>

In circle

Please note that images have to be square for this style to work as expected.

Doggo Foxy
HTML 
    <img class="o-image o-image--circle" src="https://orangecss.com/images/thumbnails/square/dog-square.jpg" alt="Doggo" />
<a href="#" class="o-image o-image--size-small o-image--circle o-image--action"><img src="https://orangecss.com/images/thumbnails/square/fox-square.jpg" alt="Foxy" /></a>

Sizes

  • Default - auto size

    Katze

  • Extra small - 60px

    Foxy

  • Small - 120px

    Hedgy

  • Medium - 240px

    Doggo

  • Large - 480px

    Hedgy
HTML 
    <img class="o-image" src="https://orangecss.com/images/thumbnails/cat.jpg" alt="Katze" />
<img class="o-image o-image--size-xsmall" src="https://orangecss.com/images/thumbnails/width-60/fox-60.jpg" alt="Foxy" />
<img class="o-image o-image--size-small o-image--action" src="https://orangecss.com/images/thumbnails/width-120/hedgehog-120.jpg" alt="Hedgy" />
<img class="o-image o-image--size-medium" src="https://orangecss.com/images/thumbnails/width-240/dog-240.jpg" alt="Doggo" />
<img class="o-image o-image--size-large" src="https://orangecss.com/images/thumbnails/width-480/hedgehog-480.jpg" alt="Hedgy" />

With action, in grid

Hedgy
Katze
Katze
Doggo
Katze
Hedgy
HTML 
    <div class="grid">
  <div class="col-2">
    <a href="#" class="o-image o-image--action">
      <img src="https://orangecss.com/images/thumbnails/hedgehog.jpg" alt="Hedgy" />
    </a>
  </div>
  <div class="col-2">
    <a href="#" class="o-image o-image--action">
      <img src="https://orangecss.com/images/thumbnails/cat.jpg" alt="Katze" />
    </a>
  </div>
  <div class="col-2">
    <a href="#" class="o-image o-image--action">
      <img src="https://orangecss.com/images/thumbnails/square/dog-square.jpg" alt="Katze" />
    </a>
  </div>
  <div class="col-2">
    <a href="#" class="o-image o-image--action">
      <img src="https://orangecss.com/images/thumbnails/square/fox-square.jpg" alt="Doggo" />
    </a>
  </div>
  <div class="col-2">
    <a href="#" class="o-image o-image--circle o-image--action">
      <img src="https://orangecss.com/images/thumbnails/square/cat-square.jpg" alt="Katze" />
    </a>
  </div>
  <div class="col-2">
    <a href="#" class="o-image o-image--circle o-image--action">
      <img src="https://orangecss.com/images/thumbnails/square/hedgehog-square.jpg" alt="Hedgy" />
    </a>
  </div>
</div>

Any dimension in square or circle

The structure of HTML is different as additional wrappers are needed to achieve the result. To change size of this images apply class to .image-wrapper like .o-image-wrapper--size-{size}

Hedgy
Hedgy
Hedgy
Hedgy

In grid

Foxy
Katze
Hedgy
Doggo
HTML 
    <div class="o-image-wrapper">
  <div class="o-image">
    <img src="https://orangecss.com/images/thumbnails/hedgehog.jpg" alt="Hedgy" />
  </div>
</div>
<div class="o-image-wrapper o-image-wrapper--size-xsmall">
  <div class="o-image">
    <img src="https://orangecss.com/images/thumbnails/hedgehog.jpg" alt="Hedgy" />
  </div>
</div>
<div class="o-image-wrapper o-image-wrapper--size-small">
  <div class="o-image o-image--circle">
    <img src="https://orangecss.com/images/thumbnails/width-240/hedgehog-240.jpg" alt="Hedgy" />
  </div>
</div>
<div class="o-image-wrapper o-image-wrapper--size-medium">
  <div class="o-image o-image--circle">
    <img src="https://orangecss.com/images/thumbnails/width-480/hedgehog-480.jpg" alt="Hedgy" />
  </div>
</div>

<div class="grid">
  <div class="col-2">
    <div class="o-image-wrapper">
      <a href="#" class="o-image o-image--rounded o-image--action">
        <img src="https://orangecss.com/images/thumbnails/width-240/fox-240.jpg" alt="Foxy" />
      </a>
    </div>
  </div>
  <div class="col-2">
    <div class="o-image-wrapper">
      <a href="#" class="o-image o-image--rounded o-image--action">
        <img src="https://orangecss.com/images/thumbnails/width-240/cat-240.jpg" alt="Katze" />
      </a>
    </div>
  </div>
  <div class="col-2">
    <div class="o-image-wrapper">
      <a href="#" class="o-image o-image--circle o-image--action">
        <img src="https://orangecss.com/images/thumbnails/square/hedgehog-square.jpg" alt="Hedgy" />
      </a>
    </div>
  </div>
  <div class="col-2">
    <div class="o-image-wrapper">
      <a href="#" class="o-image o-image--size-large o-image--circle o-image--action">
        <img src="https://orangecss.com/images/thumbnails/square/dog-square.jpg" alt="Doggo" />
      </a>
    </div>
  </div>
</div>

Usage

Attribute Description Possible values Type Required Default
shadow Throw a shadow .o-image--shadow String - -
rounded Add $o-border-radius-main (3px) border radius .o-image--rounded String - -
circle Add 100% border radius .o-image--circle String - -
action Add hover effect .o-image--action String - -
size Set with .o-image--size-{size}, if you are using any dimension image you need to set it as .o-image-wrapper--size-{size} xsmall, small, medium, large String - -

Made at Fomo

Home Documentation License