cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

Quick-add: + add another resource

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

Quick-add: + add another resource

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

            
              <article>
  <header class="full-screen-image">
    <!-- <img src="http://web.frfr.me/dev/full-screen-image/image.jpeg"> -->
    <img 
         src="http://web.frfr.me/dev/full-screen-image/image-1000w.jpg" 
         srcset="http://web.frfr.me/dev/full-screen-image/image-500w.jpg 500w, http://web.frfr.me/dev/full-screen-image/image-1000w.jpg 1000w, http://web.frfr.me/dev/full-screen-image/image-1500w.jpg 1500w, http://web.frfr.me/dev/full-screen-image/image-2000w.jpg 2000w, http://web.frfr.me/dev/full-screen-image/image-2500w.jpg 2500w, http://web.frfr.me/dev/full-screen-image/image-3000w.jpg 3000w" 
         sizes="(max-aspect-ratio: 3/2) calc(100vh * (3 / 2)), 100vw"
    >
    <h1 class="full-screen-image--title">
      <span class="full-screen-image--word nr-two">Beautiful</span> 
      <span class="full-screen-image--title-style">Full Screen</span> 
      <span class="full-screen-image--word">Image</span>
    </h1>
  </header>


  
  <div class="article-content">
    <p>Having such a beautiful image fill my entire window makes me cry, it's just sooo overwhelmingly gorgeous! Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut id tempus lacus. Integer gravida accumsan dui. Donec lacinia lorem fermentum feugiat malesuada. Nullam aliquet magna a commodo accumsan. Suspendisse vestibulum, nisi quis aliquet vestibulum, metus tortor ultrices felis, eu eleifend magna leo sed felis. Nunc eros turpis, tincidunt sit amet diam in, dictum accumsan dui. Integer elit mauris, sodales id sem ac, consectetur gravida turpis. Aliquam sed diam quis justo auctor dapibus. Donec hendrerit sagittis placerat. Proin hendrerit purus id leo imperdiet efficitur. Praesent ornare nibh vel tortor pellentesque aliquet. In lacinia, sapien non venenatis cursus, neque massa bibendum leo, vel euismod orci mauris ultrices lorem.</p>

    <p>Ut tincidunt non nunc at consectetur. Pellentesque scelerisque massa dolor, a tempus purus accumsan quis. Maecenas nec lectus sit amet magna feugiat pellentesque. Suspendisse sed purus nulla. Nullam viverra dapibus arcu eget vulputate. Donec sollicitudin a tellus sit amet viverra. Proin hendrerit lectus ex, et vehicula risus commodo a. Morbi lobortis mi quis nisi egestas dictum. Vivamus lobortis, diam suscipit consequat dictum, dolor sapien elementum urna, sed condimentum massa leo ut tortor. Morbi libero dolor, scelerisque ac arcu tristique, fringilla dapibus risus. Ut aliquet risus accumsan, placerat metus id, dignissim nisl. Donec sollicitudin accumsan magna, sit amet rhoncus mi laoreet in. Aliquam porta lectus eu leo tincidunt, vitae eleifend est efficitur. Pellentesque sollicitudin, dolor dictum venenatis eleifend, justo felis pretium diam, et accumsan libero eros ac sapien. Vivamus cursus consectetur diam nec consectetur. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>

    <p>Nunc a justo vel urna aliquet mattis. In et nunc ex. Etiam non nisl lacus. Curabitur fermentum dignissim urna ac pellentesque. Vestibulum malesuada nunc id massa pellentesque, feugiat consectetur nunc mattis. Nullam dictum condimentum libero sit amet luctus. Quisque feugiat tincidunt pulvinar. Donec sagittis dui ut velit feugiat, quis aliquam justo ultricies. Donec eu purus sapien. Pellentesque id congue ex. Donec luctus vel lectus vitae aliquam. Integer tempor tempor eros, sit amet consequat erat placerat a. Duis ante ipsum, porta eu tortor eu, semper viverra nulla. Sed ac tellus congue, gravida sem sed, feugiat urna. Donec augue ligula, placerat non accumsan at, imperdiet ut eros.</p>

    <p>Nam eu neque quam. Quisque lacinia mi eget enim vestibulum venenatis. Cras sit amet finibus augue. Duis a faucibus justo, et maximus dolor. Proin consequat quis turpis at viverra. Donec et erat purus. In venenatis leo quis rutrum consectetur. Integer placerat sed enim non rhoncus. Nullam nunc arcu, iaculis ut laoreet non, egestas in velit. In vestibulum in nibh id vulputate. Vestibulum lacus massa, eleifend quis tristique a, maximus id ex. Sed sed purus magna. Donec nibh augue, congue ac laoreet sit amet, pharetra in mi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tincidunt sapien quis felis pellentesque, nec faucibus erat tempor. Cras porttitor viverra semper.</p>

    <p>Donec cursus lacus vehicula elit efficitur sollicitudin. Sed id dui iaculis, dictum dui vel, condimentum enim. Nullam mollis quam lacinia sagittis consequat. Phasellus felis tortor, bibendum sit amet tincidunt pulvinar, semper ut quam. Nunc vitae mi sem. Aliquam fringilla ante enim, id varius diam vestibulum ac. Praesent eget diam id mauris laoreet fermentum a vel nisl. Ut ultrices, justo sit amet consectetur dictum, eros dolor congue lorem, vitae tincidunt dolor nunc sed nisl. Mauris interdum tincidunt vulputate. Mauris pulvinar, enim at varius pellentesque, orci ipsum aliquam purus, in rhoncus odio odio at ex. Donec volutpat velit sollicitudin, tincidunt nisi ut, mattis ligula. Donec id sagittis nisi, quis vestibulum nulla. Donec maximus, libero ut tempus porttitor, purus ex tristique dolor, quis tristique risus ex ac massa. Suspendisse scelerisque commodo orci vitae bibendum. Aliquam arcu mauris, mollis quis sagittis nec, rutrum mattis urna.</p>
    
    <p>Made with love by <a href="http://frfr.me">Frank</a>.</p>
  </div>
</article>
            
          
!
            
              // Magic
.full-screen-image {
  height: 100vh;
  position: relative;
  
  img {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}



// Styling
.full-screen-image {
  display: flex;
  flex-direction: column;
  justify-content: center;
  background-color: rgba(0, 0, 0, 0.3);
  
  img {
    z-index: -1;
  }
}



// Text
.full-screen-image--title {
  color: #f1cf63;
  text-align: center;
  font-family: Source Sans Pro, sans-serif;
  line-height: 3em;
  font-size: 8vw;
  font-weight: 900;
  line-height: 1.1;
  text-shadow: 0.05em 0.05em 0.1em rgba(0, 0, 0, 0.3);
}
.full-screen-image--title-style {
  position: relative;
  font-family: Playfair Display;
  font-size: 0.4em;
  line-height: 1;
  font-weight: 400;
  font-style: italic;
  display: inline-block;
  vertical-align: middle;
  margin-top: -0.5em;
  padding: 0.4em 0;
 
  &::before,
  &::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    height: 0.2em;
    background-color: currentColor;
    box-shadow: 0.05em 0.05em 0.1em rgba(0, 0, 0, 0.3);
  }
  &::before {
    top: 0;
  }
  &::after {
    bottom: 0;
  }
}



// Animation
.full-screen-image--word {
  opacity: 0;
	transform: translate(0, -0.2em);
  animation: come-home 0.5s ease forwards;
  
  &:first-child {
    animation-delay: 1s;
  }
  &:last-child {
    animation-delay: 1s + 0.15s;
  }
}
@keyframes come-home {
  to {
    opacity: 1;
	  transform: translate(0, 0);
  }
}
.full-screen-image--title-style {
  opacity: 0;
	transform: scale(0.5);
  animation: fade-in 0.3s ease 2s forwards, pop-in 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.4) 2s forwards;
  
  &::before,
  &::after {
    opacity: 0;
    animation: come-home 1s ease 2.2s forwards;
  }
  &::before {
	  transform: translate(0, -0.5em);
  }
  &::after {
    transform: translate(0, 0.5em);
  }
}
@keyframes fade-in {
  to {
    opacity: 1;
  }
}
@keyframes pop-in {
  to {
	  transform: scale(1);
  }
}



// Article content styling
.article-content {
  font-size: 1.5em;
  font-family: Times, serif;
  max-width: 40em;
  margin: 0 auto;
  padding: 5em 2em;
  line-height: 1.6;
  
  p:first-child:first-letter {
    float: left;
    font-size: 4.6em;
    line-height: 1;
    padding: 0 0.25em;
    margin-top: 0em;
    margin-left: -0.2em;
  }
}



// Reset
body {
  margin: 0;
}
            
          
!
999px
Loading ..................

Console