Dimmer
Dimmers can be used to display content on top of elements on hover.
image | The url to the image. |
alt | Image alt. |
dimmer | Dimmer classes. |
<dimmer image="/avatars/1s.png">Dimmer content</dimmer>
<dimmer image="/avatars/2s.png" dimmer="inverted">Dimmer content</dimmer>
<dimmer small circular image="/avatars/3s.png" dimmer="inverted">
<icon large twitter url="//twitter.com">
<icon large facebook url="//facebook.com">
</dimmer>Lorem ipsum dolor sit amet.
<dimmer medium rounded image="/avatars/4.png">
<header inverted>Lorem ipsum dolor</header>
<p>Lorem ipsum dolor sit amet.</p>
<button>Click here</button>
</dimmer>
<dimmer blurring medium image="/avatars/5.png"></dimmer>Lorem ipsum dolor sit amet, dolor maiorum ius ei, sea omnesque verterem ne. Facer decore theophrastus ne est, ea vim quot fierent eloquentiam, in reque porro mei. Ex legere laoreet scripserit ius, partem soluta timeam eu vim. Te mea congue aperiam, at mei diceret dolorum molestiae. Placerat complectitur vim ex. Lorem ipsum dolor sit amet, dolor maiorum ius ei, sea omnesque verterem ne. Facer decore theophrastus ne est, ea vim quot fierent eloquentiam, in reque porro mei. Ex legere laoreet scripserit ius, partem soluta timeam eu vim. Te mea congue aperiam, at mei diceret dolorum molestiae. Placerat complectitur vim ex. Lorem ipsum dolor sit amet, dolor maiorum ius ei, sea omnesque verterem ne. Facer decore theophrastus ne est, ea vim quot fierent eloquentiam, in reque porro mei. Ex legere laoreet scripserit ius, partem soluta timeam eu vim. Te mea congue aperiam, at mei diceret dolorum molestiae. Placerat complectitur vim ex.
<segment dimmable>
<dimmer>
<header inverted>Title</header>
<button primary>Add</button>
<button>View</button>
</dimmer>
<lorem>
</segment>Lorem ipsum dolor sit amet, dolor maiorum ius ei, sea omnesque verterem ne. Facer decore theophrastus ne est, ea vim quot fierent eloquentiam, in reque porro mei. Ex legere laoreet scripserit ius, partem soluta timeam eu vim. Te mea congue aperiam, at mei diceret dolorum molestiae. Placerat complectitur vim ex.
<segment small raised blue blurring dimmable>
<dimmer inverted>
<button primary>Read more</button>
</dimmer>
<lorem short>
</segment><dimmer lazyload image="https://placehold.co/543x432">Dimmer content</dimmer>