Semantic-UI | Dimmer
Last Updated :
20 May, 2020
Semantic UI is an open-source framework that uses CSS and jQuery to build great user interfaces. It is the same as a bootstrap for use and has great different elements to use to make your website look more amazing. It uses a class to add CSS to the elements.
A dimmer hides distractions to focus attention on particular content, that it will dim it.
Example 1:
This example displaying dimmer effect on hover.
For this you need jQuery Code.
$('.image').dimmer({
on: 'hover'
});
Complete code:
<!DOCTYPE html>
< html >
< head >
< title >Semantic UI</ title >
< link href =
rel = "stylesheet" />
integrity = "sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
crossorigin = "anonymous" >
</ script >
< script src =
</ script >
</ head >
< body >
< div style = "margin-top: 20px" class = "ui container" >
< div class = "ui medium image" >
< div class = "ui dimmer" >
< div class = "content" >
< h2 class = "ui inverted header" >
Geeksforgeeks
</ h2 >
class = "ui primary button" >
Go on site
</ a >
< div class = "ui button" >View</ div >
</ div >
</ div >
< img class = "ui image" src =
</ div >
</ div >
< script >
$('.image').dimmer({
on: 'hover'
});
</ script >
</ body >
</ html >
|
Output:
Example 2:
This example displaying dimmer effect on button click.
jQuery Code:
$('.dim').click(function() {$('.image').dimmer('show')});
$('.show').click(function() {$('.image').dimmer('hide')});
dim
and show
are classes of the two buttons.
Complete code:
<!DOCTYPE html>
< html >
< head >
< title >Semantic UI</ title >
integrity = "sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
crossorigin = "anonymous" >
</ script >
< script src =
</ script >
</ head >
< body >
< div style = "margin-top: 20px" class = "ui container" >
< div class = "ui medium image" >
< div class = "ui dimmer" >
< div class = "content" >
< h2 class = "ui inverted header" >
Geeksforgeeks
</ h2 >
class = "ui primary button" >
Go on site
</ a >
< div class = "ui button" >View</ div >
</ div >
</ div >
< img class = "ui image" src =
</ div >
< br >
< button class = "ui dim primary button" >
Dim
</ button >
< button class = "ui show green button" >
Show
</ button >
</ div >
< script >
$('.dim').click(function ()
{ $('.image').dimmer('show') });
$('.show').click(function ()
{ $('.image').dimmer('hide') });
</ script >
</ body >
</ html >
|
Output:
Example 3:
This example displaying the Blurring Dimmer effect.
<!DOCTYPE html>
< html >
< head >
< title >Semantic UI</ title >
< link href =
rel = "stylesheet" />
integrity = "sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
crossorigin = "anonymous" >
</ script >
< script src =
</ script >
</ head >
< body >
< div style = "margin-top: 20px" class = "ui container" >
< div class = "ui blurring medium image" >
< div class = "ui dimmer" >
< div class = "content" >
< h2 class = "ui inverted header" >
Geeksforgeeks
</ h2 >
class = "ui primary button" >
Go on site
</ a >
< div class = "ui button" >View</ div >
</ div >
</ div >
< img class = "ui image" src =
</ div >
< br >
< button class = "ui dim primary button" >
Dim
</ button >
< button class = "ui show green button" >
Show
</ button >
</ div >
< script >
$('.dim').click(function ()
{ $('.image').dimmer('show') });
$('.show').click(function ()
{ $('.image').dimmer('hide') });
</ script >
</ body >
</ html >
|
Output:
Example 4:
This example creating the Inverted Dimmer effect.
<!DOCTYPE html>
< html >
< head >
< title >Semantic UI</ title >
< link href =
rel = "stylesheet" />
integrity = "sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
crossorigin = "anonymous" >
</ script >
< script src =
</ script >
</ head >
< body >
< div style = "margin-top: 20px" class = "ui container" >
< div class = "ui medium image" >
< div class = "ui inverted dimmer" >
< div class = "content" >
< h2 class = "ui inverted header" >
Geeksforgeeks
</ h2 >
class = "ui primary button" >
Go on site
</ a >
< div class = "ui button" >View</ div >
</ div >
</ div >
< img class = "ui image" src =
</ div >
< br >
< button class = "ui dim primary button" >
Dim
</ button >
< button class = "ui show green button" >
Show
</ button >
</ div >
< script >
$('.dim').click(function ()
{ $('.image').dimmer('show') });
$('.show').click(function ()
{ $('.image').dimmer('hide') });
</ script >
</ body >
</ html >
|
Output:
Share your thoughts in the comments
Please Login to comment...