flag
X logo
Menu
Home Icons Contact
Docs
Typography
Responsive
Containers Grid Align Display
Navigation
Topnav Sidenav Slide down nav Verticale nav Fullscreen nav Buttons Pagination
Pictures
Images Animation Parallax Sliteshow Thumbnail
Helpers
Helpers Padding Margin
More
Accordion Borders Cards Colors Form List Popup modal Table Tooltips

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.

Normaal

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" />


© Copyright by Web Henkie
All right reserved
Webmaster