<header>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</header>
<figure>
<figcaption>
<h1>An Article</h1>
</figcaption>
</figure>
<article>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Blandit turpis cursus in hac habitasse platea dictumst. Placerat orci nulla pellentesque dignissim enim. Mi quis hendrerit dolor magna eget est lorem ipsum dolor. Enim praesent elementum facilisis leo vel. Leo integer malesuada nunc vel risus commodo viverra. Id nibh tortor id aliquet lectus proin nibh. Tincidunt arcu non sodales neque. Porttitor leo a diam sollicitudin tempor id eu nisl. Euismod in pellentesque massa placerat duis ultricies.
</p>
<p>
Nisl tincidunt eget nullam non nisi est sit amet. Amet tellus cras adipiscing enim eu turpis egestas. Rhoncus urna neque viverra justo nec ultrices dui sapien. Amet tellus cras adipiscing enim eu turpis. Enim sed faucibus turpis in eu mi. Senectus et netus et malesuada fames ac. Pulvinar mattis nunc sed blandit. Et leo duis ut diam quam. Iaculis urna id volutpat lacus laoreet non curabitur gravida arcu. Ultrices eros in cursus turpis. Natoque penatibus et magnis dis.
</p>
<p>
Sodales ut eu sem integer vitae justo. Elementum integer enim neque volutpat. Nec ultrices dui sapien eget mi proin sed libero enim. Vestibulum sed arcu non odio euismod lacinia at. Amet tellus cras adipiscing enim eu turpis egestas. Eros in cursus turpis massa tincidunt dui ut. Facilisi morbi tempus iaculis urna id volutpat. Diam quis enim lobortis scelerisque fermentum dui faucibus in ornare. Quam id leo in vitae turpis massa. Felis eget nunc lobortis mattis aliquam faucibus purus in.
</p>
</article>/* Change the amount it zooms on hover & the tint with the variables below. */
:root {
--zoomAmount: 140%;
--tint: DeepSkyBlue;
--accent: dodgerblue/*for text box borders*/;
}
/* -------------------------------------------------------------------- */
*,
*::before,
*::after {
box-sizing: border-box;
font-family: "Libre Bodoni", serif;
}
body,
html {
-webkit-text-size-adjust: 100%;
-webkit-tap-highlight-color: transparent;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
body {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 100%;
min-height: 100vh;
margin: 0;
backface-visibility: hidden; /* Force GPU Usage */
}
body > * {
width: 100%;
height: auto;
max-width: 1900px;
}
body > figure {
position: absolute;
margin: 0;
top: 0;
width: 100%;
height: auto;
min-height: 750px;
max-height: 750px;
z-index: -1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background: #999;
}
figure figcaption {
margin: 0;
}
figure figcaption h1 {
position: relative;
font-size: 120pt;
line-height: 120pt;
color: white;
text-shadow: 1px 1px 0px black, 2px 2px 0px black, 3px 3px 0px black;
font-weight: 900;
margin: 0;
overflow: hidden;
padding: 0 15px;
}
figure figcaption h1::after {
position: absolute;
bottom: 0;
right: 100%;
width: 100%;
height: 20px;
background: white;
content: "";
transition: all 1s ease;
}
body > header:hover ~ figure figcaption h1::after {
right: 0;
transition: all 1s ease;
}
body > header,
body > header > div {
background: url("https://picsum.photos/id/872/3840/2160");
background-size: 100%;
background-position: bottom;
background-attachment: fixed;
background-repeat: no-repeat;
mix-blend-mode: multiply;
transition: all 0.5s ease-in-out;
}
body > header {
background: var(--tint);
position: relative;
width: 100%;
max-width: 100%;
min-height: 750px;
max-height: 750px;
display: flex;
flex-direction: row;
align-items: flex-start;
justify-content: center;
flex-wrap: wrap;
overflow: hidden;
z-index: 1;
}
body > header > div {
width: 50px;
height: 50px;
mix-blend-mode: luminosity;
}
body > header > div:hover,
body > header > div:hover ~ div {
background-size: var(--zoomAmount);
transition: all 0.5s ease-in-out;
}
article {
position: relative;
max-width: 1200px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 30px 40px;
z-index: 1;
}
article p {
font-size: 14pt;
line-height: 22pt;
color: black;
border-left: 3px solid var(--accent);
padding: 30px 40px;
background: #eee;
font-weight: 300;
word-spacing: 5px;
border-radius: 0 20px 0 0;
}
article p:first-letter {
font-size: 200%;
font-weight: 600;
margin-right: 1px;
}
@media (max-width: 1250px) {
body > header,
body > figure {
max-height: 500px;
min-height: 500px;
}
figure figcaption h1 {
font-size: 70pt;
line-height: 78pt;
text-align: center;
}
body > header,
body > header > div {
background-position: center !important;
}
body > header > div {
width: 40px;
height: 40px;
}
}
@media (max-width: 400px) {
figure figcaption h1 {
font-size: 54pt;
line-height: 62pt;
}
}
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.