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.

+ add another resource

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

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.

+ add another resource

Use npm Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

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.

            
              
<main>

  <h1>Responsive CSS Grid wallboard</h1>

  <section>
    <div class=wallboard>

      <div class=wallboard_stamp>
        <a class=stamp_link href>
          <div data-vignetteOpacity=0.25>
            <div class=stamp_imgBg-tall-flowers data-imgBrightness=105%></div>
          </div>
          <p class=stamp_copy-blackTxt>Pictures of lily</p>
        </a>
      </div>

      <div class=wallboard_stamp>
        <a class=stamp_link href>
          <div data-vignetteOpacity=0.25>
            <div class=stamp_imgBg-substitute data-imgBrightness=105%></div>
          </div>
          <p class=stamp_copy-blackTxt-extraShadow>Substitute</p>
        </a>
      </div>

      <div class=wallboard_stamp>
        <a class=stamp_link href>
          <div data-vignetteOpacity=0.5>
            <div class=stamp_imgBg-tall-whiskey data-imgBrightness=105%></div>
          </div>
          <p class=stamp_copy-blackTxt>Whiskey man</p>
        </a>
      </div>

      <div class=wallboard_stamp>
        <a class=stamp_link href>
          <div data-vignetteOpacity=1>
            <div class=stamp_imgBg-chocolates data-imgBrightness=115%></div>
          </div>
          <p class=stamp_copy-whiteTxt>Miracle cure</p>
        </a>
      </div>

      <div class=wallboard_stamp>
        <a class=stamp_link href>
          <div data-vignetteOpacity=0.125>
            <div class=stamp_imgBg-tall-nightwear data-imgBrightness=110%></div>
          </div>
          <p class=stamp_copy-blackTxt>Sally Simpson</p>
        </a>
      </div>

      <div class=wallboard_stamp>
        <a class=stamp_link href>
          <div data-vignetteOpacity=.75>
            <div class=stamp_imgBg-caine data-imgBrightness=115%></div>
          </div>
          <p class=stamp_copy-whiteTxt-extraShadow>My generation</p>
        </a>
      </div>

      <div class=wallboard_stamp>
        <a class=stamp_link href>
          <div data-vignetteOpacity=0.75>
            <div class=stamp_imgBg-tall-magicBus data-imgBrightness=115%></div>
          </div>
          <p class=stamp_copy-whiteTxt>Magic bus</p>
        </a>
      </div>

      <div class=wallboard_stamp>
        <a class=stamp_link href>
          <div data-vignetteOpacity=0.5>
            <div class=stamp_imgBg-roses data-imgBrightness=110%></div>
          </div>
          <p class=stamp_copy-whiteTxt-extraShadow>Pictures of lily</p>
        </a>
      </div>

      <div class=wallboard_stamp>
        <a class=stamp_link href>
          <div data-vignetteOpacity=0.5>
            <div class=stamp_imgBg-tall-right-hotelBreaks data-imgBrightness=105%></div>
          </div>
          <p class=stamp_copy-whiteTxt-extraShadow>In the hall of the<br>mountain king</p>
        </a>
      </div>

      <div class=wallboard_stamp>
        <a class=stamp_link href>
          <div data-vignetteOpacity=0.25>
            <div class=stamp_imgBg-heinz data-imgBrightness=110%></div>
          </div>
          <p class=stamp_copy-whiteTxt>Heinz Baked Beans</p>
        </a>
      </div>

      <div class=wallboard_stamp>
        <a class=stamp_link href>
          <div data-vignetteOpacity=0.5>
            <div class=stamp_imgBg-tall-left-emptyGlass data-imgBrightness=105%></div>
          </div>
          <p class=stamp_copy-whiteTxt>Empty glass</p>
        </a>
      </div>

      <div class=wallboard_stamp>
        <a class=stamp_link href>
          <div data-vignetteOpacity=0.75>
            <div class=stamp_imgBg-teaHouseTheatre data-imgBrightness=115%></div>
          </div>
          <p class=stamp_copy-whiteTxt-extraShadow>Tea and theatre</p>
        </a>
      </div>

    </div>
  </section>
  
  <section>
    <div class=instructions>
      <div><b>&larr;</b> C&rsquo;mon and squeeze me! <b>&rarr;</b></div>
  </section>


  <section>

    <h2>Fluid-responsive CSS Grid wallboard <small><i>(no scaled images)</i> with <a class=lnk target=_blank title="[new window]" href="https://codepen.io/2kool2/pen/mXpwbL">Vignette &amp; Brightness hover effect</a></small></h2>

    <p>Wallboard fills all device widths up to 1844px without stretching or squeezing the images.</p>
    <p>Ideally the images should be 604px wide but <strong>must</strong> have the minimum safe-area of 296px (320px - 2 * spacing).</p>
    <p>The height of a single row image is completely variable.<br>The tall images are calculated as: (2 * single row height) + (1 * spacing).</p>
    <p>Most images are cropped from the centre, though left or right is equally usable, and purely dependent on the location of the safe-area.<br>For example: &ldquo;Mountain king&rdquo; crops left and &ldquo;Empty glass&rdquo; crops right.</p>
    
    <p>There's a version of this wallboard which has a flexbox fallback (supports IE 10) and doesn't use Custom Properties: <a target=_blank title="[new window]" href="https://codepen.io/2kool2/pen/rJbGKq" class=lnk-txt>Fluid-responsive CSS Grid wallboard (no scaled images) with Flexbox fallback</a>.</p>

  </section>

</main>




<footer class=myStuff><style>.myStuff{z-index:10;font-weight:100;color:#777;font-size:16px;position:fixed;width:100vw;left:0;bottom:0;margin:0;background-color:hsla(269,19%,20%,.9);padding:.125em}.myStuff_lnk,.myStuff_lnk:visited{text-decoration-skip: ink;color:hsla(211,100%,72%,1);text-decoration-color:hsla(211,100%,72%,.5);transition:all .3s ease-out}.myStuff_lnk:focus,.myStuff_lnk:hover{color:#fff;text-decoration-color:currentcolor}</style><a class=myStuff_lnk target=_blank title="[LinkedIn - new window]" href="https://www.linkedin.com/in/mikefoskett">Mike Foskett</a> &mdash; <a class=myStuff_lnk target=_blank title="[new window]" href="https://codepen.io/2kool2/pens/popular/?grid_type=list#">Popular pens</a> &mdash; <a class=myStuff_lnk target=_blank title="[new window]" href="https://codepen.io/2kool2/pens/public/?grid_type=list#">Latest pens</a> &mdash; <a class=myStuff_lnk target=_blank title="[new window]" href="https://websemantics.uk/">webSemantics</a></footer>
            
          
!
            
              html {
  --spacing: 0.75rem;
}
@media (min-width: 48em) { /* 768px */
  html {
    --spacing: 1rem;
  }
}
body {
  font-family: regularfont, sans-serif;
  line-height: 1.5;
  margin: var(--spacing);

  font-family: sans-serif;
  line-height: 1.5;
  text-align: center;
  padding-bottom: 2rem;
  color: hsl(269,19%,30%);
  background-color: hsla(32,100%,85%,.35);
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg width='100%25' xmlns='http://www.w3.org/2000/svg'%3E%3Cdefs%3E%3Cfilter id='a'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.4'/%3E%3C/filter%3E%3C/defs%3E%3C!-- %3Cpath filter='url(%23a)' opacity='.3' d='M0 0h1200v256H0z'/%3E--%3E%3Crect filter='url(%23a)' opacity='.3' width='100%25' height='100%25'/%3E%3C/svg%3E");
}
body * {
  box-sizing: border-box;
}
header {
  text-align: center;
  max-width: 40em;
  margin: 1rem auto;
}
main {
  margin-bottom: 1rem;
}
h1 {
  position: absolute !important;
  height: 1px; width: 1px; 
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
}
h2 {
  color: #fff;
  background-color: hsl(269,19%,30%);
  padding: var(--spacing);
  text-align: center;
  xmax-width: 29em;
  margin: var(--spacing) auto 1rem;
  font-size: 2rem;
  font-weight: 100;
  line-height: 1.25;
}
h2 small {
  font-size: 1.25rem;
  display: block;
}
p {
  text-align: left;
  max-width: 33em;
  margin: var(--spacing) auto;
}
.lnk {
  color: hsla(211, 100%, 72%,1); /* Darkest WCAG against #3a3a3a */
  text-decoration-skip: ink;
  text-decoration-color: hsla(211, 100%, 72%,.5);
  outline: 0 solid #fff;
  transition: all .3s;
}
.lnk:hover,
.lnk:focus {
  color: hsla(211, 100%, 98%,1);
  text-decoration-color: currentcolor;
  text-shadow: 0 1px 1px #000;
}

.instructions {
  overflow: hidden;
  font-size: 1rem;
  background-color: hsla(269,19%,30%,.1);
}
@media (min-width:34em) {
  .instructions {
    font-size: 1.5rem;
  }
}
.instructions div {
  transform: scale(0.75, 1);
  letter-spacing: -0.02em;
  animation: scaleArrow 5s infinite cubic-bezier(.68,-0.55,.27,1.55);
}
.instructions b {
  display: inline-block;
  opacity: .5;
  font-size: 2em;
  font-weight: 700;
  vertical-align: sub;
  transform: scale(.8, .75);
  animation: scaleArrow 5s infinite cubic-bezier(.68,-0.55,.27,1.55);
}
@keyframes scaleArrow {
  50% {
    transform: scale(1.28, 1);
  }
}
@media (min-width: 34em) {
  @keyframes scaleArrow {
    50% {
      transform: scale(1.28, 1);
      letter-spacing: 0.02em;
    }
  }
}


/*
    CSS GRID

    Images best served as
    604px wide with a 296px minimum safe area.
    With a fixed height, preferably a multiple of the line-height (24px) to complement vertical rhythm.

    Here images are 604x240px and 604x496px
*/

.wallboard {
  --columns: 1;
  margin: 0 auto;
  display: grid;
  grid-gap: var(--spacing);
  grid-template-columns: var(--columns);
}
@media (min-width: 39.25em) { /* 628px - 2 columns contains: 2*296px (images) + 3*12px (--spacing) */
  .wallboard {
    --columns: 1fr 1fr;
  }
}
@media (min-width: 59.5em) { /* 952px - 3 columns contains: 3*296px (images) + 4*16px (--spacing) */
  .wallboard {
    --columns: 1fr 1fr 1fr;
  }
}


.wallboard {
  --imgMaxWidth: 604px;
  --imgSingleRowHeight: 240px; /* tall images work out to 492px and 496px - difference is due to --spacing change from 12px to 16px */

  max-width: 1844px; /* maximum size for 3 columns containing: 3*604px (images) + 2*16px (--spacing) */
  max-width: calc(var(--imgMaxWidth) * 3 + var(--spacing) * 2);
  margin: 1rem auto;
}

.wallboard_stamp {
  max-width: var(--imgMaxWidth);
}
/* All the tall images are in the  odd cells: 1, 3, 5,... */
.wallboard_stamp:nth-child(odd) {
  grid-row: span 2;
}

.stamp_link {
  position: relative;
  display: block;
}

[class^="stamp_imgBg"] {
  background-position: bottom center;
  height: var(--imgSingleRowHeight);
}
[class^="stamp_imgBg-tall"] {
  height: calc(var(--imgSingleRowHeight) * 2 + var(--spacing));
}

[class^="stamp_copy"] {
  font-size: 1.75rem;
  line-height: 1.25;
  position: absolute;
  bottom: 0;
  left: 50%;
  z-index: 1;
  text-align: center;
  transform: translate3d(-50%, 0, 0);
  margin: 0 0 .25rem;
  white-space: nowrap;
}
[class^="stamp_copy"][class*="-blackTxt"] {
  color: #000;
  text-shadow: 0 0 2px rgba(255,255,255,1); /* overlays the image so increase edge contrast for accessibility */
}
[class^="stamp_copy"][class*="-blackTxt-extraShadow"] {
  color: #000;
  text-shadow: 0 0 1px #fff, 0 0 2px #fff, 0 0 3px #fff; /* overlays the image so increase edge contrast for accessibility */
}
[class^="stamp_copy"][class*="-whiteTxt"] {
  color: #fff;
  text-shadow: 0 0 2px #000; /* overlays the image so increase edge contrast for accessibility */
}
[class^="stamp_copy"][class*="-whiteTxt-extraShadow"] {
  color: #fff;
  text-shadow: 0 0 3px #000, 0 0 2px #000, 0 0 1px #000; /* overlays the image so increase edge contrast for accessibility */
}


/* Responsive wallboard column positions */

@media (min-width: 39.25em) { /* 628px - 2 columns */

/*   .wallboard_stamp:nth-child(1) {grid-column: 1;} */
/*   .wallboard_stamp:nth-child(2) {grid-column: 2;} */
/*   .wallboard_stamp:nth-child(3) {grid-column: 2;} */
/*   .wallboard_stamp:nth-child(4) {grid-column: 1;} */
/*   .wallboard_stamp:nth-child(5) {grid-column: 1;} */
/*   .wallboard_stamp:nth-child(6) {grid-column: 2;} */
/*   .wallboard_stamp:nth-child(7) {grid-column: 2;} */
/*   .wallboard_stamp:nth-child(8) {grid-column: 1;} */
/*   .wallboard_stamp:nth-child(9) {grid-column: 1;} */
/*   .wallboard_stamp:nth-child(10) {grid-column: 2;} */
/*   .wallboard_stamp:nth-child(11) {grid-column: 2;} */
/*   .wallboard_stamp:nth-child(12) {grid-column: 1;} */

}


@media (min-width: 59.5em) { /* 952px - 3 columns */

/*   .wallboard_stamp:nth-child(1) {grid-column: 1;} */
/*   .wallboard_stamp:nth-child(2) {grid-column: 2;} */
/*   .wallboard_stamp:nth-child(3) {grid-column: 3;} */
/*   .wallboard_stamp:nth-child(4) {grid-column: 1;} */
  .wallboard_stamp:nth-child(5) {
    grid-column: 2;
    grid-row: 2 / span 2; /* Move stamp up to previous row to fill the gap */
  }
/*   .wallboard_stamp:nth-child(6) {grid-column: 3;} */
/*   .wallboard_stamp:nth-child(7) {grid-column: 1;} */
/*   .wallboard_stamp:nth-child(8) {grid-column: 2;} */
/*   .wallboard_stamp:nth-child(9) {grid-column: 3;} */
/*   .wallboard_stamp:nth-child(10) {grid-column: 1;} */
  .wallboard_stamp:nth-child(11) {
    grid-column: 2;
    grid-row: 5 / span 2; /* Move stamp up to previous row to fill the gap */
  }
/*   .wallboard_stamp:nth-child(12) {grid-column: 3;} */

}

/*
    Most images are cropped from the centre.
    Though left or right may be used dependent on where the safe-area is.
    For example:
*/
[class^="stamp_imgBg"][class*="-right"] {
  background-position: right center;
}
[class^="stamp_imgBg"][class*="-left"] {
  background-position: left center;
}



/* Stamp image vignette */

[data-vignetteOpacity] {
  position: relative;
}
[data-vignetteOpacity="1"] {--vignetteOpacity: 1;}
[data-vignetteOpacity="0.75"] {--vignetteOpacity: 0.75;}
[data-vignetteOpacity="0.5"] {--vignetteOpacity: 0.5;}
[data-vignetteOpacity="0.25"] {--vignetteOpacity: 0.25;}
[data-vignetteOpacity="0.125"] {--vignetteOpacity: 0.125;}
[data-vignetteOpacity="0"] {--vignetteOpacity: 0;}

[data-vignetteOpacity]::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  opacity: var(--vignetteOpacity, 0.5);
  background-image: radial-gradient(
    ellipse at center,
    hsla(8, 60%, 0%, 0) var(--vignetteInnerRadius, 58%),
    hsla(8, 60%, 0%, 1) var(--vignetteOuterRadius, 150%)
  );
  box-shadow: inset 0 0 1rem 0
    hsla(8, 60%, 0%, calc(var(--vignetteOpacity, 0.5) / 2));
  transition: opacity 0.3s ease-out;
}
a:hover [data-vignetteOpacity]::after,
a:focus [data-vignetteOpacity]::after {
  opacity: 0;
}


/* Stamp image brightness */

[data-imgBrightness="100%"] {--imgBrightness: 100%;}
[data-imgBrightness="105%"] {--imgBrightness: 105%;}
[data-imgBrightness="110%"] {--imgBrightness: 110%;}
[data-imgBrightness="115%"] {--imgBrightness: 115%;}
[data-imgBrightness="120%"] {--imgBrightness: 120%;}
[data-imgBrightness="125%"] {--imgBrightness: 125%;}

[data-imgBrightness] {
  display: block;
  transition: filter 0.3s ease-out;
}
a:hover [data-imgBrightness],
a:focus [data-imgBrightness] {
  filter: brightness(var(--imgBrightness, 100%));
}





/* Images - 604px x 240px or 496px */

[class^="stamp_imgBg"][class*="-flowers"] {
  background-image: url(https://websemantics.uk/pens/css-grid-wallboard/i/flowers.jpg);
}
[class^="stamp_imgBg"][class*="-substitute"] {
  background-image: url(https://websemantics.uk/pens/css-grid-wallboard/i/substitute.jpg);
}
[class^="stamp_imgBg"][class*="-whiskey"] {
  background-image: url(https://websemantics.uk/pens/css-grid-wallboard/i/whiskey.jpg);
}
[class^="stamp_imgBg"][class*="-chocolates"] {
  background-image: url(https://websemantics.uk/pens/css-grid-wallboard/i/chocolate.jpg);
}
[class^="stamp_imgBg"][class*="-nightwear"] {
  background-image: url(https://websemantics.uk/pens/css-grid-wallboard/i/nightwear.jpg);
}
[class^="stamp_imgBg"][class*="-caine"] {
  background-image: url(https://websemantics.uk/pens/css-grid-wallboard/i/michael-caine.jpg);
}
[class^="stamp_imgBg"][class*="-magicBus"] {
  background-image: url(https://websemantics.uk/pens/css-grid-wallboard/i/magic-bus.jpg);
}
[class^="stamp_imgBg"][class*="-roses"] {
  background-image: url(https://websemantics.uk/pens/css-grid-wallboard/i/roses.jpg);
}
[class^="stamp_imgBg"][class*="-hotelBreaks"] {
  background-image: url(https://websemantics.uk/pens/css-grid-wallboard/i/hotel-breaks.jpg);
}
[class^="stamp_imgBg"][class*="-teaHouseTheatre"] {
  background-image: url(https://websemantics.uk/pens/css-grid-wallboard/i/tea-house-theatre.jpg);
}
[class^="stamp_imgBg"][class*="-emptyGlass"] {
  background-image: url(https://websemantics.uk/pens/css-grid-wallboard/i/empty-glass.jpg);
}
[class^="stamp_imgBg"][class*="-heinz"] {
  background-image: url(https://websemantics.uk/pens/css-grid-wallboard/i/heinz.jpg);
}

            
          
!
999px
🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.
Loading ..................

Console