How to Create Image folding Effect using HTML & CSS?

How to Create Image folding Effect using HTML & CSS?

In HTML, we already know how to add images using <img>tag & how to add
attributes for <img> tag. With the use of CSS properties we know how to add style
& effects to this <img> tag. The common effects we add to <img> tag hover effect
& style we add to <img> tag is adding different borders & frames to images. We
also add transparency & fading effects to <img> tag using CSS properties.
In this blog, we are going to see a simple example of how to add a folding effect to
images using HTML & CSS.

To create this effect first we need to follow the below steps

●add the main div tag with 4 list items.

●use nth-child property to give different styles to each list item.

Now, let's see HTML code to add

●Create an HTML file

●Then create a CSS file & link that file with an HTML file. You can also add this
code in the <head> tag as an internal CSS.

●Then create a heading & unordered list with 4 list items to add images into it.

<html>
<head>
      <link rel="stylesheet" href="style.css">
</head>
<body>
       <h1>Image Folding Effect</h1>
<ul class="un-list">
<li class="list"></li>
<li class="list"></li>
<li class="list"></li>
<li class="list"></li>
</ul>
</body>
</html>

CSS Code

We know that CSS is used to add style to HTML tags.Using CSS we can give
different types of effects as well as add different types of animations to our HTML
page.

While creating a style sheet for CSS, you need to remember the following points

●Restore all the browsers effects

●Use classes & ids to add effects to HTML tags.

●Use nth-child() selector property to give different styles to different list
items.

*{

margin: 0;

padding: 0;

box-sizing: border-box;

}

body

{

background-color: rgb(9, 138, 57);

list-style: none;

}

h1

{

display: flex;

justify-content: center;

margin: 2em;

}

un-list

{

width: 40em;

height: 20em;

top: 50%;

left: 50%;

transform: translate(120%,50%);

display: flex;

}

list

{

width: 100em;

height: 30em;

background-image: url("wallpaper.png"); <!--

usethe image for which you want to give folding effect--> background-size: cover;

}

list:nth-child(even)

{

transform: skewY(-40deg);

}

ist:nth-child(odd)

{

transform: skewY(40deg);

list:nth-child(1)

{

border-left: blanchedalmond 0.2em solid;

background-position: 0;border-right: blanchedalmond 0.2em solid;

}

list:nth-child(2)

{

background-position: -8em;

border-right: blanchedalmond 0.2em solid;

}
.list:nth-child(3){
background-position: -16em;
border-right: blanchedalmond 0.2em solid;
}

list:nth-child(4)

{

background-position: -24em;

border-right: blanchedalmond 0.2em solid;

}

You might also like

You've successfully subscribed to HTML5Awesome
Great! Next, complete checkout to get full access to all premium content.
Welcome back! You've successfully signed in.
Unable to sign you in. Please try again.
Success! Your account is fully activated, you now have access to all content.
Error! Stripe checkout failed.
Success! Your billing info is updated.
Billing info update failed.