<div class="poster">
 <div class="poster__text">
  <h1 class="destination" data-place="new york">New York</h1>
  <span class="destination" data-place="new york" aria-hidden="true">New York<span>
  </div>
</div>
$text-c: #fefefe;

.poster {
  position: relative;
  height: 100vh;
  overflow: hidden;
  
  &::before,
  &::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
  }
  
  &::after {
    background: linear-gradient(135deg, saturate(#a83c97, 30%) 40%, saturate(#ca3f7b, 40%) 40%) no-repeat;
  }
  
  @supports (mix-blend-mode: darken) {
    &::before,
    &::after {
      filter: contrast(2) brightness(.8);
    }
    
    &::before {
      background: url('https://unsplash.it/1300/1200?image=818') no-repeat center center / cover;
    }
		
    &::after {
			background: linear-gradient(135deg, #db2797 40%, #b04c72 40%) no-repeat;
      mix-blend-mode: darken;
    }
  }
  
  @media screen and (min-width: 600px) {
    width: 65vh;
    height: 92vh;
    margin: 4vh auto;
    border: 2vmin solid #fefefe;
    box-shadow: 0 10vh 20vh -10vh rgba(0, 0, 0, .5);
  }
}

// text container
.poster__text {
  position: relative;
  z-index: 1;
	opacity: .9;
  transform-origin: bottom right;
  transform: rotate(-15deg) translate(-10%, -50%);
}

// base text
.destination {
  position: relative;
  display: block;
  margin: 0 4vmin 0 0;
  font-size: 8vmin;
  text-align: right;
  font-weight: bolder;
  text-transform: uppercase;
  -moz-text-fill-color: transparent;
  -webkit-text-fill-color: transparent;
  -moz-text-stroke-color: $text-c;
  -webkit-text-stroke-color: $text-c;
  -moz-text-stroke-width: .025em;
  -webkit-text-stroke-width: .025em;
  
  &::before,
  &::after {
    content: attr(data-place);
    position: absolute;
    right: 0;
  }
  
  &::before {
    top: 90%;
  }
  
  &::after {
    top: 180%;
  }
}

h1.destination {
  top: 50vmin;
}

span.destination {
  top: 8vmin;
	
	// text with fill
  &::after {
    text-shadow: 0 1em $text-c;
  }
}


* { box-sizing: border-box; }

body {
  background-color: #1b0c37;
	color: $text-c;
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.