Images
Images Helpers
Klik op de Class naam om deze te kopiëren.
image CSS code: {max-width: 100%;height: auto;display: block;}
image-max CSS code: {width: 100%;height: 100%;display: block;}
image-center CSS code: {margin: auto;display: block;}
image-hover CSS code: :hover{opacity: 0.7;}
Opacity
Klik op de Class naam om deze te kopiëren.
opacity-min
opacity
opacity-max
Voorbeeldcode:
<img class="image opacity-min" src="images/zomer1.jpg" />
<img class="image opacity" src="images/zomer1.jpg" />
<img class="image opacity-max" src="images/zomer1.jpg" />
Grayscale
Klik op de Class naam om deze te kopiëren.
Normaal
grayscale-min
grayscale
grayscale-max
Voorbeeldcode:
<img class="image grayscale-min" src="images/zomer2.jpg" />
<img class="image grayscale" src="images/zomer2.jpg" />
<img class="image grayscale-max" src="images/zomer2.jpg" />
Sepia
Klik op de Class naam om deze te kopiëren.
Normaal
sepia-min
sepia
sepia-max
Voorbeeldcode:
<img class="image sepia-min" src="images/zomer3.jpg" />
<img class="image sepia" src="images/zomer3.jpg" />
<img class="image sepia-max" src="images/zomer3.jpg" />
Hover
Klik op de Class naam om deze te kopiëren.
hover-opacity
hover-grayscale
hover-sepia
hover-opacity-off
Voorbeeldcode:
<img class="image hover-opacity" src="images/zomer4.jpg" />
<img class="image hover-grayscale" src="images/zomer4.jpg" />
<img class="image hover-sepia" src="images/zomer4.jpg" />
<img class="image opacity-max hover-opacity-off" src="images/zomer1.jpg" />