Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URLs added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using its URL and the proper URL extension.

+ add another resource

JavaScript

Babel includes JSX processing.

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

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Auto Save

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.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <section class="section-text">
  <div class="container">
    <h1>Castle</h1>
    <p>A castle is a type of fortified structure built during the Middle Ages predominantly by the nobility or royalty and by military orders. Scholars usually consider a castle to be the private fortified residence of a lord or noble.</p>
    <p>This is distinct from a mansion, palace and villa, whose main purpose was exclusively for pleasance and are not primarily fortresses but may be fortified. Use of the term has varied over time and, sometimes, has also been applied to structures such as hill forts and 19th- and 20th-century homes built to resemble castles. </p>
    <p>Over the Middle Ages, when genuine castles were built, they took on a great many forms with many different features, although some, such as curtain walls, arrowslits, and portcullises, were commonplace.</p>
    <p>European-style castles originated in the 9th and 10th centuries, after the fall of the Carolingian Empire resulted in its territory being divided among individual lords and princes. These nobles built castles to control the area immediately surrounding them and the castles were both offensive and defensive structures: they provided a base from which raids could be launched as well as offered protection from enemies.</p>
    <p>Although their military origins are often emphasised in castle studies, the structures also served as centres of administration and symbols of power. Urban castles were used to control the local populace and important travel routes, and rural castles were often situated near features that were integral to life in the community, such as mills, fertile land, or a water source.</p>
  </div>
</section>

<section>
  <div class="grid">
    <div class="col col-1">
      <figure>
        <img src="https://assets.codepen.io/162656/castle1-unsplash.jpg" alt="Lake Bled, Bled, Slovenia">
        <figcaption>Lake Bled, Bled, Slovenia</figcaption>
      </figure>
    </div>
    <div class="col col-2">
      <figure>
        <img src="https://assets.codepen.io/162656/castle2-unsplash.jpg" alt="Schloss Neuschwanstein, Neuschwansteinstraße, Schwangau, Deutschland">
        <figcaption>Schloss Neuschwanstein, Schwangau, Deutschland</figcaption>
      </figure>
    </div>
    <div class="col col-3">
      <figure>
        <img src="https://assets.codepen.io/162656/castle3-unsplash.jpg" alt="Isola di Capo Passero, Italia">
        <figcaption>Isola di Capo Passero, Italia</figcaption>
      </figure>
    </div>
    <div class="col col-4">
      <figure>
        <img src="https://assets.codepen.io/162656/castle4-unsplash.jpg" alt="Eilean Donan Castle, Dornie, United Kingdom">
        <figcaption>Eilean Donan Castle, Dornie, United Kingdom</figcaption>
      </figure>
    </div>
  </div>
</section>

<section class="section-text">
  <div class="container">
    <p>Many northern European castles were originally built from earth and timber but had their defences replaced later by stone. Early castles often exploited natural defences, lacking features such as towers and arrowslits and relying on a central keep.</p>
    <p>In the late 12th and early 13th centuries, a scientific approach to castle defence emerged. This led to the proliferation of towers, with an emphasis on flanking fire.</p>
    <p>Many new castles were polygonal or relied on concentric defence – several stages of defence within each other that could all function at the same time to maximise the castle's firepower. These changes in defence have been attributed to a mixture of castle technology from the Crusades, such as concentric fortification, and inspiration from earlier defences, such as Roman forts. Not all the elements of castle architecture were military in nature, so that devices such as moats evolved from their original purpose of defence into symbols of power. Some grand castles had long winding approaches intended to impress and dominate their landscape.</p>
    <div class="copyright">
      <p>Images from <a href="https://unsplash.com/" target="_blank">Unsplash</a></p>
      <p>Text from <a href="https://en.wikipedia.org/wiki/Castle" target="_blank">Wikipedia</a></p>
    </div>
  </div>
</section>

<footer class="page-footer">
  <span>made by </span>
  <a href="https://georgemartsoukos.com/" target="_blank">
    <img width="24" height="24" src="https://assets.codepen.io/162656/george-martsoukos-small-logo.svg" alt="George Martsoukos logo">
  </a>
</footer>
              
            
!

CSS

              
                /* RESET STYLES
–––––––––––––––––––––––––––––––––––––––––––––––––– */
@import url("https://fonts.googleapis.com/css2?family=Jost:wght@400;700&display=swap");

* {
  box-sizing: border-box;
}

body {
  font: 20px/1.5 "Jost", sans-serif;
  margin: 0;
}

.section-text {
  padding: 5vh 20px;
  max-width: 1000px;
}

.copyright {
  display: flex;
  gap: 20px;
}

.copyright p:first-child {
  position: relative;
}

.copyright p:first-child::before {
  content: "•";
  position: absolute;
  top: 50%;
  right: -13px;
  transform: translateY(-50%);
  font-family: sans-serif;
}

/* MAIN STYLES
–––––––––––––––––––––––––––––––––––––––––––––––––– */

.grid {
  position: relative;
  display: grid;
  height: 100vh;
}

.grid::before,
.grid::after {
  content: "";
  position: absolute;
  background: #333;
  z-index: 1;
}

.grid::before {
  top: 0;
  left: 50%;
  width: 1px;
  height: 100%;
}

.grid::after {
  top: 50%;
  left: 0;
  width: 100%;
  height: 1px;
}

.grid .col {
  position: relative;
  grid-area: 1/1;
  cursor: pointer;
  transition: clip-path 0.5s;
}

.grid .col-1 {
  clip-path: inset(0 50% 50% 0);
}

.grid .col-2 {
  clip-path: inset(0 0 50% 50%);
}

.grid .col-3 {
  clip-path: inset(50% 50% 0 0);
}

.grid .col-4 {
  clip-path: inset(50% 0 0 50%);
}

.grid .col figure {
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 50%;
  margin: 0;
  transition: all 0.5s;
}

.grid .col-2 figure {
  left: 50%;
}

.grid .col-3 figure {
  top: 50%;
}

.grid .col-4 figure {
  top: 50%;
  left: 50%;
}

.grid .col img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
}

.grid .col figcaption {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  padding: 6px 12px;
  border-radius: 5px;
  width: max-content;
  max-width: 95%;
  line-height: 1;
  color: white;
  background: #ff0054;
  text-align: center;
  opacity: 0;
  transition-property: opacity;
}

.grid .col.animate-col {
  clip-path: inset(0);
}

.grid .col.animate-col figure {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.grid .col.animate-caption figcaption {
  opacity: 1;
  transition-duration: 0.3s;
}

/* FOOTER STYLES
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.page-footer {
  position: fixed;
  right: 0;
  bottom: 50px;
  display: flex;
  align-items: center;
  padding: 5px;
  z-index: 1;
  font-size: 16px;
  background: white;
}

.page-footer a {
  display: flex;
  margin-left: 4px;
}

              
            
!

JS

              
                const cols = document.querySelectorAll(".grid .col");
const CLASS1 = "animate-col";
const CLASS2 = "animate-caption";

cols.forEach(function (col) {
  col.addEventListener("click", function () {
    this.classList.toggle(CLASS1);
    if (this.classList.contains(CLASS2)) {
      this.classList.remove(CLASS2);
    }
  });

  col.addEventListener("transitionstart", function () {
    this.style.zIndex = 2;
  });

  col.addEventListener("transitionend", function () {
    if (col.classList.contains(CLASS1)) {
      col.classList.add(CLASS2);
    } else {
      col.style.zIndex = "auto";
    }
  });
});

              
            
!
999px

Console