Fullscreen GIF

HTML
<figure class="fullscreen"> <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/46992/skater.gif" alt="" /> <figcaption class="fullscreen-caption"> <div class="inner"> <h2>Superbird <br/>of paradise</h2> <h3>Psychedelic smile face</h3> </div> </figcaption> </figure>
SCSS
$green: #00c192; @import url(https://fonts.googleapis.com/css?family=Open+Sans+Condensed:700|Playfair+Display:400,700); *, *:before, *:after { margin: 0; padding: 0; box-sizing: border-box; } html, body { width: 100%; height: 100%; font-family: 'Playfair Display', serif; overflow: hidden; } .fullscreen { width: 100%; height: 100%; } .fullscreen img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; } .fullscreen-caption { position: relative; top: 12.5%; left: 27.5%; width: 60%; height: 75%; z-index: 2; border: 5vw solid white; border-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/46992/skater.gif"); border-image-slice: 10%; box-shadow: 0 0 100px rgba(black, 0.4), inset 0 0 100px rgba(black, 0.4); } .fullscreen-caption .inner { position: relative; display: inline-block; top: 100%; transform: translateX(-55%) translateY(-50vh); } .fullscreen-caption h2, .fullscreen-caption h3, .fullscreen-caption a { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .fullscreen-caption h2 { display: inline-block; margin-bottom: 1rem; color: black; text-align: left; font-weight: 400; font-size: 7vw; line-height: 7.8vw; } .fullscreen-caption h3 { text-align: center; color: rgba(black, 0.3); font-weight: 700; font-size: 1.2rem; font-style: italic; } .fullscreen-caption .fullscreen-link { position: relative; display: inline-block; margin: 12vh 0 0 20px; padding-bottom: 10px; font-family: 'Open Sans Condensed', sans-serif; color: white; text-decoration: none; text-transform: uppercase; letter-spacing: 2px; border-bottom: 2px solid white; &:before { content: ''; position: absolute; top: 3px; left: -20px; width: 0; height: 0; border-top: 7px solid transparent; border-bottom: 7px solid transparent; border-left: 10px solid white; } }
JAVASCRIPT
Expand for more options Login