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 adivelement that contains the image. This will be the surface of the first stack.

• Style theimgelement using the border and box-shadow properties.

• Specify dimensions for the div element (class="stack1"). Keep the position of the div elementrelativeso that thepositionof 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 thetop, leftand transform values as-15px, -15pxandrotate(-10deg). >:before pseudo-elements, while5px, 0androtate(10deg)are:afterpseudo-elements. Give each pseudo-element a different background color for greater impact.

   
  
 Image Stack Illusion 
 
  
  

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 (:beforeand: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!