Materialize Material Box Caption Example

Source Code

<!DOCTYPE html>
  <html lang="en">
  <head>
    <title>Materialize Modal</title>
    <meta name="viewport" content="width = device-width, initial-scale = 1" />
    <meta name="robots" content="noindex,nofollow">
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
    <!-- Compiled and minified CSS -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" />
    <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
    <!-- Compiled and minified JavaScript -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
    <style type="text/css">
      .dropdown-content{
       min-width:250px;
      }
    </style>
  </head>
  <body>
    <h1 class="center-align">Materialize CSS Dropdown</h1>   
    <img class="materialboxed" width="650" src="../code-support/images/slider/bird.jpg" data-caption="A picture of a way with a group of trees in a park">      
<script type="text/javascript">
      $(document).ready(function(){
        $('.materialboxed').materialbox();
  });
    </script>
  </body>
</html>

Source Code

Output :Running

MATERIALIZE-TUTORIAL

MATERIALIZE-MATERIAL-BOX-AND-SLIDERS OTHER EXAMPLES