nl flag
logo

Afbeeldingen

Class Omschrijving
image
Maakt een afbeelding responsive
image-max
Maakt een afbeelding responsive en op volle grote
image-hover
Geeft een hover effect aan een afbeelding
image-center
Centreert een afbeelding

Thumbnail popup

thumbnail thumbnail thumbnail
<div class="thumbnail">
  <img alt="" src="" data-popup-open="" />
  <img alt="" src="" data-popup-open="" />
  <img alt="" src="" data-popup-open="" />
</div>

<div class="popup" data-popup="" data-popup-close="">
  <div class="popup-inner">
    <img alt="popup" class="image-max" src="" />
    <a class="popup-close" data-popup-close="" href="javascript:void(0);"></a>
  </div>
</div>

Opacity

Normaal

opacity-min
opacity
opacity-max

Grayscale

Normaal

grayscale-min
grayscale
grayscale-max

Sepia

Normaal

sepia-min
sepia
sepia-max

Hover

hover-opacity
hover-grayscale
hover-sepia
hover-opacity-off

Slideshow

Afbeelding 1
Afbeelding 2
Afbeelding 3
Afbeelding 4
Afbeelding 5
Afbeelding 6
Afbeelding 7
Afbeelding 8
Afbeelding 9
Afbeelding 10
<div class="slider">
  <div style="display: inline-block;">
    <img src=""/>
    <span class="content"></span>
  </div>
  <div>
    <img src=""/>
    <span class="content"></span>
  </div>
  <button class="next"></button>
  <button class="prev"></button>
</div>