Visual Studio Code : HTML in Javascript / Jquery Syntax Highlight

https://marketplace.visualstudio.com/items?itemName=EldarGerfanov.leet-html

Material design Card Shadow css

/* material design shadow */

  

  .mat-card-1 {

    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);

    transition: all 0.3s cubic-bezier(.25,.8,.25,1);

    width: 95%;

    margin: 0 auto;

    display: block;

    

  }

  .mat-card-1:hover {

    box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);

    width: 100%;

    margin: 0 auto;

    display: block;

  }

  

  .mat-card-2 {

    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);

    transition: all 0.3s cubic-bezier(.25,.8,.25,1);

    width: 95%;

    margin: 0 auto;

    display: block;

  }

  .mat-card-2:hover {

    box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);

    width: 100%;

    margin: 0 auto;

    display: block;

  }

  .mat-card-3 {

    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);

    transition: all 0.3s cubic-bezier(.25,.8,.25,1);

    width: 95%;

    margin: 0 auto;

    display: block;

  }

  

  .mat-card-3:hover {

    box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);

    width: 100%;

    margin: 0 auto;

    display: block;

  }

  

  .mat-card-4 {

    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);

    transition: all 0.3s cubic-bezier(.25,.8,.25,1);

    width: 95%;

    margin: 0 auto;

    display: block;

  }

  .card-4:hover {

    box-shadow: 0 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22);

    width: 100%;

    margin: 0 auto;

    display: block;

  }

  .mat-hover-1 {

    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);

    transition: all 0.3s cubic-bezier(.25,.8,.25,1);

    width: 90%;

    margin: 0 auto;

    display: block;

  }

  

  .mat-hover-1:hover {

    box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);

    width: 100%;

    margin: 0 auto;

    display: block;

  }

  

  .mat-hover-2 {

    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);

    transition: all 0.3s cubic-bezier(.25,.8,.25,1);

    width: 90%;

    margin: 0 auto;

    display: block;

  }

  .mat-hover-1:hover {

    box-shadow: 0 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22);

    width: 100%;

    margin: 0 auto;

    display: block;

  }

Image Hover Effect

http://imagehover.io/

Imagehover.css is a lovingly crafted CSS library allowing you to easily implement scaleable image hover effects. Choose from over 40 hover effect classes from a CSS library weighing in at a minified size of only 19KB.

https://bootsnipp.com/snippets/92e5X
card style image hover

Bootstrap : Navbar shrink when scroll

Jquery : Jsonbin Parse Json database