In this article, we will create an Overlap Block layout template using HTML & CSS. The Overlap Block Layout is a design concept where multiple elements or blocks on a webpage visually overlap with one another. This layout frequently uses CSS’s z-index property to regulate the order in which items stack, in addition to absolute or relative placement approaches.
These blocks can be arranged and styled to provide a sense of depth and interactivity, especially when elements react to user inputs such as hovering. Designers can highlight particular materials or create layered visual effects by utilizing the overlap block pattern to build visually appealing and dynamic interfaces.
Preview
Approach
- Create a container div (.overlap-container) to hold the overlapping blocks. Inside, add individual block divs (.block) for each visually overlapping element.
- Style the body with font and background color also style .overlap-container with relative positioning, specifying width, height, and overflow.
- Position block elements absolutely within the container.Apply a smooth transition for hover effects, customize background colors using nth-child, and insert content.
- On hover, translate blocks slightly for a visual effect.
- Use z-index within .block:hover to ensure the hovered block appears in front, enhancing visual hierarchy.
Example: In this example, we will design an Overlap Block Layout using HTML and CSS.
<!DOCTYPE html> <html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<title>Overlap Block Layout</title>
<style>
body {
font-family: 'Arial', sans-serif;
margin: 20px auto;
padding: 0;
background-color: #f8f8f8;
}
h1 {
color: green;
text-align: center;
}
.overlap-container {
position: relative;
margin: 10px auto;
max-width: 820px;
height: 60vh;
overflow: hidden;
border: 2px solid black;
background-color: #becef1a1;
border-radius: 20px;
box-shadow: 5px 5px 10px gray;
}
.block {
position: absolute;
width: 300px;
height: 110px;
padding: 20px 30px;
background-color: #3498db;
color: #fff;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
transition: transform 0.3s ease-in-out;
}
.block:hover {
transform: translateX(20px) translateY(-20px);
z-index: 1;
box-shadow: 10px 5px 10px rgb(95, 92, 92);
height: 120px;
}
.block:nth-child(2) {
background-color: #e74c3c;
}
.block:nth-child(3) {
background-color: #2ecc71;
}
.block:nth-child(4) {
background-color: #e656de;
}
.block-content {
margin-top: 10px;
}
</style>
</head>
<body>
<h1>GeeksForGeeks</h1>
<div class="overlap-container">
<div class="block" style="top: 50px;
left: 50px;">
<h2>Block 1</h2>
<div class="block-content">
<p>Content for Block 1</p>
</div>
</div>
<div class="block" style="top: 120px;
left: 180px;">
<h2>Block 2</h2>
<div class="block-content">
<p>Content for Block 2</p>
</div>
</div>
<div class="block" style="top: 220px;
left: 300px;">
<h2>Block 3</h2>
<div class="block-content">
<p>Content for Block 3</p>
</div>
</div>
<div class="block" style="top: 320px;
left: 400px;">
<h2>Block 4</h2>
<div class="block-content">
<p>Content for Block 4</p>
</div>
</div>
</div>
</body>
</html>
|
Output: