New York Card

HTML
<div class="screen"> <div class="content"> <h2>New York</h2> </div> </div>
CSS
* { box-sizing: border-box; } html { height: 100%; width: 100%; } body { margin: 0; width: 100%; height: 100%; min-height: 100vh; background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/242518/a_wyq3d86ic-florian-giorgio.jpg"); background-repeat: no-repeat; background-size: cover; background-position: center center; font-family: 'Roboto', sans-serif; display: flex; justify-content: center; align-items: center; } .screen { display: flex; justify-content: center; align-items: center; width: 320px; height: 200px; background: linear-gradient(to bottom, rgba(255,223,255,0.1) 0%, rgba(255,223,255,0) 50%, rgba(255,223,255,0.1) 100%); box-shadow: inset 0 0 1px rgba(255,255,255,0.5), 0px 0px 20px rgba(0,0,0,0.5); border-radius: 0.3em; transition: all 0.50s; } .screen:hover { background: linear-gradient(to bottom, rgba(255,255,255,0.8) 0%, rgba(255,255,255,0) 50%, rgba(255,255,255,0.8) 100%); transform: scale(1.3); } .screen h2 { color: #fff; font-weight: 300; letter-spacing: 0.03em; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-size: 2.3em; }
JAVASCRIPT
Expand for more options Login