Semantic-UI | Dimmer
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> <link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" 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> <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:
Please Login to comment...