Card Blur and transform

by Sergey khorev

HTML

<!DOCTYPE html>
 <html lang="en">
 <head>
   <meta charset="UTF-8">
   <title>Document</title>
 </head>
 <body>
   <div class="box">
     <h1 class="head-text">Text here</h1>
     <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua...</span><br>
     <div><button>Click me</button></div>
   </div>
 </body>
 </html>

CSS

body{
  background-image: url(https://images.unsplash.com/photo-1569025591510-a69144e20084?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80);
}

@font-face {
	font-family:'SF Pro Display';
	font-style:normal;
	font-weight:100;
	src:local('☺︎'), url("https://apple.com/wss/fonts/SF-Pro-Display/v2/sf-pro-display_ultralight.woff2") format("woff2"), url("/wss/fonts/SF-Pro-Display/v2/sf-pro-display_ultralight.woff") format("woff"), url("/wss/fonts/SF-Pro-Display/v2/sf-pro-display_ultralight.ttf") format("truetype");
	/* (C) 2015 Apple Inc. All rights reserved.*/
}

.box{
  font-family: "SF Pro Text","SF Pro Icons","Helvetica Neue","Helvetica","Arial",sans-serif;
  width: 250px;
  height: 150px;
  border: 1px solid rgba(0,0,0,0.2);
  transition: 150ms;
  padding: 25px;
  padding-top: 0px;
  margin: 55px;
  border-radius: 5px;
  color: #fff;
  background: rgba(0,0,0,0.6);
  backdrop-filter: saturate(180%) blur(20px);
}
.head-text {
  font-size: 23px;
  padding-top: 0px;
  text-transform: uppercase;
  }
.pd:active{box-shadow: 0 12px 36px 0 rgba(0,0,0,.25);transform: translateY(3px);transition: 150ms;}  
  
.box:hover {
    box-shadow: 0 12px 36px 0 rgba(0,0,0,.25);
    transform: translateY(-4px)
}
div{padding-top: 5px;}