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;
}
