Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to Create Image Stack Illusion by using HTML and CSS?
Visual illusions are quite fascinating when it comes to web development. Using visual illusions in our websites attracts users since it can play with their minds. It tricks our brains into believing something which is actually not present. These illusions can be created using various techniques in CSS. One of most commonly used illusion is image stack illusion, which simply a delusion of depth. In this article, we will discuss steps involved in creating an image stack illusion by only using HTML and CSS.
What is Image Stack Illusion?
Image stack illusion is a visual delusion which is created by stacking multiple images on top of each other with different transparency. When you view it from an angle, all the images mix with each other and creates the illusion of a threedimensional image.
This effect was previously done by using photoshop. However, nowadays we can create one by simply using HTML and CSS.
Syntax
.stack {
position: relative;
}
.stack:before,
.stack:after {
content: "";
position: absolute;
z-index: -1;
border: 10px solid white;
box-shadow: 4px 2px 4px rgba(0, 0, 0, 0.3);
transform: rotate(angle);
}
Steps to Create Image Stack Illusion
Create a div element with an image inside it. This will be the face of the first stack.
Style the img element with border and box-shadow properties.
Assign dimensions to the div element. Keep the position of the div element as relative so that the position of the upcoming pseudo elements (:before and :after elements) will remain relative to the div element.
Use the property ":before" to add the first pseudo element of the stack. Set its position as absolute and z-index as -1.
Style the pseudo element using background-color, box-shadow and border properties with different top, left and transform values.
Use the property ":after" to create the second pseudo element. Style it similarly with different positioning values to create the visual illusion.
Example: Creating Image Stack Effect
In this example, we create a stack illusion using pseudo elements. The :before element is rotated -10 degrees and positioned behind, while the :after element is rotated 10 degrees for the stacked effect ?
<!DOCTYPE html>
<html>
<head>
<style>
* {
margin: 0;
padding: 0;
}
body {
background-color: #f0f0f0;
padding: 50px;
text-align: center;
}
h1 {
font-family: Arial, sans-serif;
color: #333;
margin-bottom: 30px;
}
.stack {
display: inline-block;
position: relative;
margin: 20px;
}
.stack img {
width: 200px;
height: 150px;
border: 8px solid white;
box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.3);
display: block;
position: relative;
z-index: 2;
}
.stack:before,
.stack:after {
content: "";
position: absolute;
width: 200px;
height: 150px;
border: 8px solid white;
box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.2);
z-index: -1;
}
.stack:before {
background-color: #ff6b6b;
top: -10px;
left: -10px;
transform: rotate(-8deg);
}
.stack:after {
background-color: #4ecdc4;
top: 8px;
left: 8px;
transform: rotate(8deg);
}
</style>
</head>
<body>
<h1>Image Stack Illusion</h1>
<div class="stack">
<img src="/css/images/css-mini-logo.jpg" alt="CSS Logo">
</div>
</body>
</html>
An image with a 3D stack effect appears, showing the main image on top with two colored layers (red and teal) positioned and rotated behind it, creating a depth illusion.
Use Cases in Web Design
Image stack illusions can be effectively used in various web design scenarios ?
Portfolio Galleries Showcase creative work with engaging visual effects
Product Showcases Make product images more appealing and interactive
Landing Pages Create eye-catching hero sections that grab attention
Brand Presentations Add depth to logo displays and brand materials
Conclusion
Image stack illusion is a powerful CSS technique that creates depth perception using pseudo elements. By manipulating position, rotation, and layering with :before and :after pseudo elements, we can achieve compelling visual effects that enhance user engagement without requiring external graphics tools.
2K+ Views
