animated card

dabblet.css

/**
 * animated card
 */

* { 
  margin : 0;
  padding: 0;
  box-sizing : border-box;
  font-familly : "Poppins", sans-serif;
}
body {
  display : flex;
  align-items : center;
  justify-content : center;  
  background-color: #fff;
  min-height : 800px;
}

.container {
  position : relative;
  width : 500px;
  display : flex;
  align-items : center;
  justify-content : center;
  flex-warp : warp;
  padding : 20px;  
}

.container .card {
  position: relative;
  max-width : 300px;
  height : 225px;  
  background-color : #fff;
  margin : 30px 10px;
  padding : 20px 15px;
  
  display : flex;
  flex-direction : column;
   box-shadow: 13px 13px 20px rgba(0, 0, 0, 0.2), -13px 13px 20px rgba(0, 0, 0, 0.2), -6px -6px 5px white;
 border-radius : 15px;
}

.container .card:hover {
  height : 320px; 
   box-shadow: 13px 13px 20px rgba(0, 0, 0, 0.2), -13px 13px 20px rgba(0, 0, 0, 0.2), -6px -6px 5px white;
}


.container .card .image {
  position : relative;
  width : 260px;
  height : 260px;
  
  top : -40%;
  left: 8px;
  box-shadow : 2px 5px 20px rgba(0,0,0,0.5);
  z-index : 1;
  border-radius: 10px;
}

.container .card .image img {
  max-width : 100%;
  border-radius : 15px;
}

.container .card .content {
  position : relative;
  top : -140px;
  padding : 10px 15px;
  color : #111;
  text-align : center;
  
  visibility : hidden;
  opacity : 0;
  transition : 0.8s ease-in-out;
    
}

.container .card:hover .content {
   margin-top : 30px;
   visibility : visible;
   opacity : 1;
   transition-delay: 0.5s;
   transition-timing-function: ease;
  
}

dabblet.html

<body>
  <div class = container>
    <div class = card>
      <div class = image>
        <img href = "#" src =               https://i.pinimg.com/originals/a4/7b/a5/a47ba59b4a353e0928ef0551ca44f980.jpg>
      </div>
      <div class = content>
        <h3>This is content</h3>
        <p>DIn publishing and graphic design,           Lorem ipsum is a placeholder text               commonly used to demonstrate the visual         form of a document or a typeface without         relying on meaningful content.</p>
      </div>
    </div>    
  </div>
</body>E

dabblet.js

// alert('Hello world!');

settings.json

{"view":"separate","fontsize":"130","seethrough":"1","prefixfree":"","page":"all"}