Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
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. Let’s get started.
What is Image Stack Illusion?
Image stack illusion is a visual delusion which is creating 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 three-dimensional image.
This effect was previously done by using photoshop. However, nowadays we can create one by simply using HTML and CSS.
Steps to be Followed
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 (class= "stack1"). 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 instead of the page since we will keep the positions of those pseudo elements as absolute. Float your div element to left. Add margin and padding to it for better appearance.
Use the property “:before” to add the first pseudo element of the stack. Don’t add content to it. Assign its dimensions and give it absolute positioning. Style it using background-color, box-shadow and border properties.
Keep the z-index of the pseudo element as -1. Give different values of top and left to give it different positions and create different illusions. You can also rotate your pseudo element to observe different effects.
Use the property “:after” to create the second pseudo element. Style it similarly as the first pseudo element. Just change the top, left and transform values to create the visual illusion. This completes your first stack.
Similarly, you can create as many stacks as you can in a web page. Here, we have created 2 stacks in a page.
Example
In this example, we have created a stack of images. For the stack, we have kept top, left and transform values as -15px, -15px and rotate(-10deg) for the :before pseudo element whereas 5px, 0 and rotate(10deg) for :after pseudo element. Different background-color is given to each pseudo element for more impact.
<html>
<head>
<style>
* {
margin: 0;
padding: 0;
}
body {
background-color: #B9C8BC;
}
img {
height: 253px;
width: 262px;
border: 10px solid white;
box-shadow: 4px 4px 4px grey;
}
h1 {
text-align: center;
text-decoration: underline;
font-family: Georgia;
}
.stack1,
.stack2,
.stack3 {
float: left;
position: relative;
margin: 65px;
padding: 3px;
}
.stack1:before,
.stack1:after {
content: "";
border: 10px solid white;
position: absolute;
z-index: -1;
}
.stack1 {
height: 250px;
width: 260px;
}
.stack1:before {
height: 280px;
width: 260px;
background-color: grey;
top: -15px;
left: -15px;
transform: rotate(-10deg);
box-shadow: 4px 2px 4px #9a2ca0;
}
.stack1:after {
height: 250px;
width: 260px;
background-color: #808000;
top: 5px;
left: 0;
transform: rotate(10deg);
box-shadow: 4px 2px 4px #9a2ca0;
}
</style>
</head>
<body>
<h1> Image Stack Illusion </h1>
<div class="stack1">
<img src="https://www.tutorialspoint.com/images/physics-tutorials_icon.svg">
</div>
</body>
</html>
Where Can We Use Image Stack Illusion in Web Designing?
In web designing, image stack illusions can be used for creating various mind-blowing visual layouts. It can be used for making eye-catchy image galleries and engaging product advertising pages. Also, designers can use it to showcase their portfolio. Industries and big businesses can incorporate this effect for creating their landing pages.
Conclusion
Image stack illusion is popularly used in web development, advertisements and graphic designing. Lot of users’ attraction has persuaded the developers to create more of such eye-catchy visuals. Also, we are no more relying on photoshop apps for this effect. We can easily create this by only using HTML and CSS. In this article, we have used pseudo classes (:before and :after) for achieving the desired results. We have seen 6 different illusions in this article. However, many more are possible, all you need is to do practice and create your own visual effect following the same steps as discussed here.
1K+ Views
