Design a Layered Image Page Template using HTML and CSS

Last Updated : 30 Jul, 2024

The article provides a complete guide for creating a layered image layout using HTML and CSS. The Layered Image Page refers to a webpage design that contains layered structured visual elements using images. Here, the design contains two boxes with background images and some empty rounded boxes with borders to make the page more beautiful. The CSS property position with value absolute and background images gives the web page a layered effect. We will be stacking multiple images on top of each other.

Preview

Approach

The <body> element contains the content of the HTML document. Div having class gfg displays the text "GeeksforGeeks" at the top of the page, The element div with class .parent_box acts as the parent container for the layered boxes, using flexbox for alignment.
The element div with class .text contains the information about graphic design with a hover effect that scales the text.
The element div with class .box-container wrapped individual boxes representing layered images.
The boxes have property positions with value absolute and use left, and top properties to arrange themselves to make the look of a layered image with the hover effect.

Example: The below example illustrates the Layered Image layout template using HTML & CSS.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" 
          content="width=device-width,
                   initial-scale=1.0">
    <title>Layered Image Page Template</title>
    <link rel="stylesheet" 
          href="style.css">
</head>

<body>
    <div class="gfg">
      GeeksforGeeks
      </div>
    <div class="parent_box">
        <div class="text">
            <div>
                Graphic Design refers to the
                art of creating visuals in order
                to share ideas and is often seen
                in product packaging, magazines,
                websites, and user interfaces.It
                helps us to understand complex
                ideas clearly, make strong brand
                identities, sell products, and create
                user-friendly websites and apps.
              </div>
        </div>
        <div class="box-container">
            <div class="box" id="box1"></div>
            <div class="box" id="box2"></div>
            <div class="box" id="box3"></div>
            <div class="box" id="box4"></div>
            <div class="box" id="box5"></div>
        </div>
    </div>
</body>

</html>

CSS

/* style.css */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    background-color: rgb(191, 240, 240);
}

.parent_box {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    width: 100vw;
    gap: 20px;
}

.box-container {
    height: 80vh;
    width: 55vw;
}

.text {
    width: 30vw;
    height: 50vh;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 1vh;
    font-size: 4vh;
    line-height: 40px;
    color: green;
}

.text:hover {
    transform: scale(1.3);
    transition: 2s ease-in-out;
}

.gfg {
    font-size: 30px;
    color: green;
    font-weight: 700;
    text-align: center;
    padding-top: 10px;
    height: 7vh;
}

#box1 {
    height: 55vh;
    width: 40vw;
    background-image:
        url(
"https://media.geeksforgeeks.org/wp-content/uploads/20231109173229/Poster-Designer-copy.webp");
    background-size: contain;
    border: 1px solid green;
    border-radius: 100%;
    position: absolute;
    left: 50vw;
    top: 28vh;

}

#box1:hover {
    transform: scale(0.9);
    transition: 1.5s ease-in-out;
}

#box2 {
    height: 30vh;
    width: 18vw;
    background-image:
        url(
"https://media.geeksforgeeks.org/wp-content/uploads/20231116160350/Graphic-Design-copy.webp");
    background-size: cover;
    border: 10px solid rgb(157, 192, 157);
    border-radius: 100%;
    position: absolute;
    left: 42vw;
    top: 65vh;
}

#box2:hover {
    transform: scale(1.2);
    transition: 1.5s ease-in-out;
}

#box3 {
    height: 20vh;
    width: 12vw;
    background-color: rgb(242, 247, 245, 0.0);
    border-radius: 100%;
    position: absolute;
    left: 70vw;
    top: 17vh;
    border: 12px solid rgb(157, 192, 157);
}

#box3:hover {
    transform: scale(1.2);
    transition: 0.7s ease-in-out;
}

#box4 {
    height: 16vh;
    width: 8vw;
    background-color: rgb(215, 236, 229, 0.0);
    border-radius: 100%;
    position: absolute;
    left: 80vw;
    top: 70vh;
    border: 10px solid rgb(157, 192, 157);
}

#box4:hover {
    transform: scale(1.2);
    transition: 1s ease-in-out;
}

#box5 {
    height: 7vh;
    width: 5vw;
    background-color: rgb(205, 228, 220, 0.0);
    border: 5px solid rgb(69, 157, 69);
    border-radius: 100%;
    border-radius: 100%;
    position: absolute;
    left: 70vw;
    top: 85vh;
}

#box5:hover {
    transform: scale(1.3);
    transition: 1s ease-in-out;
}

Output:

Design a Layered Image Page Template using HTML and CSS

shivanigupta18rk

Improve

Article Tags :

Design a Layered Image Page Template using HTML and CSS

Preview

Approach

Similar Reads

Thank You!

What kind of Experience do you want to share?