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

Click on the Class name to copy it.

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

Click on the Class name to copy it.

Normal

opacity-min

opacity

opacity-max


Example code:

<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

Click on the Class name to copy it.

Normal

grayscale-min

grayscale

grayscale-max


Example code:

<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

Click on the Class name to copy it.

Normal

sepia-min

sepia

sepia-max


Example code:

<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

Click on the Class name to copy it.

hover-opacity

hover-grayscale

hover-sepia

hover-opacity-off


Example code:

<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