Mosaic Image Display

INFORMATION & CODE

Mosaic Image Display

What the Code Does

This code provides a structured webpage layout featuring a centered container with a styled image section and a grid-based overlay. The HTML document establishes the basic page structure, linking an external CSS stylesheet for styling and preparing a placeholder for JavaScript functionality. Inside the body, a main wrapper (.large_page) holds a central section containing an architectural image and an overlapping article element divided into multiple grid items.

How the Code Works

The CSS is responsible for the visual presentation and layout positioning of these elements. It uses CSS Grid to arrange the article elements into a multi-column structure with custom gaps and blending modes (mix-blend-mode: screen), which creates a dynamic visual overlay on top of the image. Additionally, positioned .cover elements act as decorative framing components, utilizing borders and responsive sizing to give the central section a polished, framed appearance.

How to Use the Code

To use this code, save the HTML snippet into an .html file (e.g., index.html) and the CSS code into a stylesheet named styles.css within the same directory. Ensure that you have an internet connection to load the external image URL specified in the <img> tag. You can then open the HTML file in any modern web browser to view the rendered design, and you can further customize the layout and colors.

HTML


                <!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Mosaic Image Display</title>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <div class="large_page">
      <div class="cover"></div>
        <section class="section">
	        <img src="https://e-nash.net/photos/aerial-architectural-design-architecture.jpg" alt="aerial-architectural">
	        <article>
		        <div class="grided"></div>
		        <div class="grided"></div>
		        <div class="grided"></div>
		        <div class="grided"></div>
		        <div class="grided"></div>
	        </article>
        </section>
        <div class="cover"></div>      
      </div>
    </div>
  </body>
</html>

CSS


                      .large_page {
        position: relative;
        top: 111px;
        width: 100%;
        padding: 100px 10px 10px 10px;
        background-color: #ffffff;
        border: 1px solid #aaaaaa;
        overflow: auto;
      }

      .section {
        position: relative;
        display: grid;
	      width: 395px;
        height: auto;
	      margin: 0 auto;
	      line-height: 0;
        background-color: #80a0c0;
        border: 10px solid #80a0c0;
      }
      
      section img {
	      width: 100%;
      }
      section article {
	      position: absolute;
	      top: -10px;
	      width: 100%;
	      background: #ffffff;
	      display: grid;
        border: 2px solid #000;
	      grid-template-columns: 1fr 1fr 1fr;
	      grid-gap: 2.8% 1.8%;
	      mix-blend-mode: screen;
      }
      section .grided {
	      background: #000000;
	      height: 130px;
      }
      section .grided:nth-of-type(2) {
	      grid-column: 2 / 4;
      }
      .cover {
        position: relative;
        top: 10px;
        display: grid;
        width: 395px;
        height: 10px;
        margin: auto;
        background-color: #fff;
        border: 0;
        border-bottom: 10px solid #80a0c0;
        z-index: 3;
      }
      .cover:nth-child(3) {
        top: -10px;
        height:6vw;
        border: 0;
        border-top: 8px solid #80a0c0;
      }

MENU

INFORMATION & CODE