MaterialDesign Card 2 WIP

In this example below you will see how to do a MaterialDesign Card 2 WIP with some HTML / CSS and Javascript

A few cards with material design and hover.css

Thumbnail
This awesome code was written by MrWicket, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright MrWicket ©
  • HTML
  • CSS
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>MaterialDesign Card 2 WIP</title>
  
  
  <link rel='stylesheet prefetch' href='https://github.com/IanLunn/Hover/blob/master/css/hover.css'>

      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <div id="card" class="button hvr-float">
  <div class=image></div>
  <div class="container">
    <h4><b>Name</b></h4>
    <p>Fill here</p>
  </div>
</div>
  
  

</body>

</html>

/*Downloaded from https://www.codeseek.co/MrWicket/materialdesign-card-2-wip-YpKowP */
/**Ive used hover.css to make the effect**/

@import url('https://fonts.googleapis.com/css?family=Roboto');

*{
  font-family: 'Roboto', sans-serif;
}

#card {
  margin:8px;
  float:left;
   position:relative;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
    transition: 0.3s;
    width: 50vh;
    border-radius: 5px;
    
}

.card:hover {
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
}

img {
    border-radius: 5px 5px 0 0;
}

.container {
    padding: 2px 16px;
    height:100%;
}

.image{
  background-image:url("https://i.imgur.com/AMf9X7E.jpg");
    height:200px;
    width:100%;
    background-size: 100% auto;
    background-repeat:no-repeat;
}

/* Float */

.hvr-float{
  display: inline-block;
  vertical-align: middle;
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  backface-visibility: hidden;
  -moz-osx-font-smoothing: grayscale;
  transition-duration: 0.3s;
  transition-property: transform;
  transition-timing-function: ease-out;
}
.hvr-float:hover,
.hvr-float:focus,
.hvr-float:active {
  transform: translateY(-8px);
}

Comments