How to create the illusion of image stacking using HTML and CSS?
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 id="Image-Stack-Illusion"> Image Stack Illusion </h1>
<div class="stack1">
<img src="/static/imghw/default1.png" data-src="https://www.tutorialspoint.com/images/physics-tutorials_icon.svg" class="lazy" 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!
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
AI Hentai Generator
Generate AI Hentai for free.
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
Table Border in HTML
Sep 04, 2024 pm 04:49 PM
Guide to Table Border in HTML. Here we discuss multiple ways for defining table-border with examples of the Table Border in HTML.
Nested Table in HTML
Sep 04, 2024 pm 04:49 PM
This is a guide to Nested Table in HTML. Here we discuss how to create a table within the table along with the respective examples.
HTML margin-left
Sep 04, 2024 pm 04:48 PM
Guide to HTML margin-left. Here we discuss a brief overview on HTML margin-left and its Examples along with its Code Implementation.
HTML Table Layout
Sep 04, 2024 pm 04:54 PM
Guide to HTML Table Layout. Here we discuss the Values of HTML Table Layout along with the examples and outputs n detail.
Moving Text in HTML
Sep 04, 2024 pm 04:45 PM
Guide to Moving Text in HTML. Here we discuss an introduction, how marquee tag work with syntax and examples to implement.
How do you parse and process HTML/XML in PHP?
Feb 07, 2025 am 11:57 AM
This tutorial demonstrates how to efficiently process XML documents using PHP. XML (eXtensible Markup Language) is a versatile text-based markup language designed for both human readability and machine parsing. It's commonly used for data storage an
HTML Ordered List
Sep 04, 2024 pm 04:43 PM
Guide to the HTML Ordered List. Here we also discuss introduction of HTML Ordered list and types along with their example respectively
HTML onclick Button
Sep 04, 2024 pm 04:49 PM
Guide to HTML onclick Button. Here we discuss their introduction, working, examples and onclick Event in various events respectively.
