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
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(
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(
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: