Home > Article > Web Front-end > How to create the illusion of image stacking using HTML and CSS?
How to create the illusion of image stacking using HTML and CSS?
- WBOYforward
- 2023-09-16 14:05:081160browse
Optical illusions are very fascinating when it comes to web development. Using optical illusions in our website engages users because it plays with their minds. It tricks our brains into believing something that doesn't actually exist. These illusions can be created using various techniques in CSS. One of the most commonly used illusions is the image stack illusion, which is simply an illusion of depth. In this article, we’ll discuss the steps involved in creating an image stack illusion using only HTML and CSS. let's start.
What is the image stack illusion?
The image stacking illusion is a visual illusion created by stacking multiple images with varying transparency together. When you view it from a certain angle, all the images blend into each other and create the illusion of a three-dimensional image.
This effect was previously done using Photoshop. However, now we can create one simply using HTML and CSS.
Steps to follow
Create a div element that contains the image. This will be the surface of the first stack.
Style the img element using the border and box-shadow properties.
Specify dimensions for the div element (class="stack1"). Keep the position of the div element relative so that the position of the upcoming pseudo-elements (:before and :after elements) will remain relative to the div element, not relative to the Will keep the position of these pseudo-elements as absolute. Float the div element to the left. Add margins and padding for a better look.
Add the first pseudo-element of the stack using the attribute ":before" . Don't add content to it. Specify its dimensions and give it absolute positioning. Style it using the background color, box shadow, and border properties.
Keep the z-index of the pseudo-element at -1. Give top and left different values to give it a different position and create a different illusion. You can also rotate pseudo-elements to see different effects.
Create a second pseudo-element using the attribute ":after" . Its style is similar to the first pseudo-element. Simply change the top, left and transform values to create the optical illusion. This completes your first stack.
Similarly, you can create as many stacks as you want in a web page. Here we have created 2 stacks in one page.
Example
In this example we create a bunch of images. For the stack, we leave the top, left and transform values as -15px, -15px and rotate(-10deg). >:before pseudo-elements, while 5px, 0 and rotate(10deg) are :after pseudo-elements. Give each pseudo-element a different background color for greater 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" alt="How to create the illusion of image stacking using HTML and CSS?" >
</div>
</body>
</html>
Where can we use the image stack illusion in web design?
In web design, the image stack illusion can be used to create a variety of exciting visual layouts. It can be used to create eye-catching image galleries and engaging product advertising pages. Additionally, designers can use it to showcase their portfolios. Industries and large businesses can incorporate this effect to create their landing pages.
in conclusion
The image stack illusion is widely used in web development, advertising and graphic design. The appeal to many users convinced developers to create more such eye-catching visuals. Additionally, we no longer rely on the Photoshop application to achieve this effect. We can easily create it using just HTML and CSS. In this article, we use pseudo-classes (:before and :after) to achieve the desired result. We looked at 6 different illusions in this article. However, there are more possibilities, all you need to do is follow the same steps discussed here to practice and create your own visuals.
The above is the detailed content of How to create the illusion of image stacking using HTML and CSS?. For more information, please follow other related articles on the PHP Chinese website!