Get Orange

Image

HTML

Add styling to images.

Basic

Apply classes directly to img tag or on a tag.

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

With shadow

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

Rounded

Add border radius to image.

Katze Hedgy
HTML 
    <img class="image image--rounded" src="https://orangecss.com/images/thumbnails/square/cat-square.jpg" alt="Katze" />
<a href="#" class="image image--size-small image--rounded 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="image image--circle" src="https://orangecss.com/images/thumbnails/square/dog-square.jpg" alt="Doggo" />
<a href="#" class="image image--size-small image--circle 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="image" src="https://orangecss.com/images/thumbnails/cat.jpg" alt="Katze" />
<img class="image image--size-xsmall" src="https://orangecss.com/images/thumbnails/width-60/fox-60.jpg" alt="Foxy" />
<img class="image image--size-small image--action" src="https://orangecss.com/images/thumbnails/width-120/hedgehog-120.jpg" alt="Hedgy" />
<img class="image image--size-medium" src="https://orangecss.com/images/thumbnails/width-240/dog-240.jpg" alt="Doggo" />
<img class="image 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="image image--action">
      <img src="https://orangecss.com/images/thumbnails/hedgehog.jpg" alt="Hedgy" />
    </a>
  </div>
  <div class="col-2">
    <a href="#" class="image image--action">
      <img src="https://orangecss.com/images/thumbnails/cat.jpg" alt="Katze" />
    </a>
  </div>
  <div class="col-2">
    <a href="#" class="image image--action">
      <img src="https://orangecss.com/images/thumbnails/square/dog-square.jpg" alt="Katze" />
    </a>
  </div>
  <div class="col-2">
    <a href="#" class="image image--action">
      <img src="https://orangecss.com/images/thumbnails/square/fox-square.jpg" alt="Doggo" />
    </a>
  </div>
  <div class="col-2">
    <a href="#" class="image image--circle image--action">
      <img src="https://orangecss.com/images/thumbnails/square/cat-square.jpg" alt="Katze" />
    </a>
  </div>
  <div class="col-2">
    <a href="#" class="image image--circle 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 .image-wrapper--size-{size}

Hedgy
Hedgy
Hedgy
Hedgy

In grid

Foxy
Katze
Hedgy
Doggo
HTML 
    <div class="image-wrapper">
  <div class="image">
    <img src="https://orangecss.com/images/thumbnails/hedgehog.jpg" alt="Hedgy" />
  </div>
</div>
<div class="image-wrapper image-wrapper--size-xsmall">
  <div class="image">
    <img src="https://orangecss.com/images/thumbnails/hedgehog.jpg" alt="Hedgy" />
  </div>
</div>
<div class="image-wrapper image-wrapper--size-small">
  <div class="image image--circle">
    <img src="https://orangecss.com/images/thumbnails/width-240/hedgehog-240.jpg" alt="Hedgy" />
  </div>
</div>
<div class="image-wrapper image-wrapper--size-medium">
  <div class="image 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="image-wrapper">
      <a href="#" class="image image--rounded 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="image-wrapper">
      <a href="#" class="image image--rounded 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="image-wrapper">
      <a href="#" class="image image--circle image--action">
        <img src="https://orangecss.com/images/thumbnails/square/hedgehog-square.jpg" alt="Hedgy" />
      </a>
    </div>
  </div>
  <div class="col-2">
    <div class="image-wrapper">
      <a href="#" class="image image--size-large image--circle 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 .image--shadow String - -
rounded Add $border-radius-main (3px) border radius .image--rounded String - -
circle Add 100% border radius .image--circle String - -
action Add hover effect .image--action String - -
size Set with .image--size-{size}, if you are using any dimension image you need to set it as .image-wrapper--size-{size} xsmall, small, medium, large String - -

Made at Fomo

Home Documentation License