body { width: 100%; min-height: 100vh; background-image: linear-gradient(60deg, #F7CAC9 15%, #91A8D0 85%); } .h1 { margin: 1.2em; font-family: 'Dancing Script', cursive; color: rgba(white, .85); } .wrap { display: flex; justify-content: center; align-items: center; } .inner { padding-right: 1em; padding-left: 1em; min-width: 300px; } .section { max-width: 480px; padding: 1em; border: 6px double currentColor; background-color: rgba(white,.5); } .clip { background-size: cover; -webkit-background-clip: text; background-clip: text; background-image: url("https://c1.staticflickr.com/1/361/19427534675_ffc194fddf_o.jpg"); color: transparent; font-size: 8em; line-height: 1.05; font-weight: bold; text-align: center; }
<h1 class="h1">clip text</h1> <div class="wrap"> <div class="inner" id="js-query-action"> <section class="section"> <figure class="clip"> CLIP TEXT </figure> </section> </div> </div> <link href="https://fonts.googleapis.com/css?family=Dancing+Script:400,700" rel="stylesheet">