How to create Image Folding Effect using HTML and CSS?
In this article, we are going to create an image folding effect below the main image. This is a simple project, we can achieve our target only by using HTML and CSS.
Approach:
- Create the main div in which we are creating 4 list tags.
- Use of nth-child() selector property to give different styles to different list items.
HTML Code:
- First, we create an HTML file (index.html).
- Then we link the CSS file that provides all the animation’s effect to our HTML.
It is also placed inside <head> tag. - Coming to the body section of our HTML code.
- Firstly, we are giving heading to our page.
- Then, we have to create an unordered list in which we have 5 list items that are further used to store the image.
index.html
<!DOCTYPE html><html lang="en"><head> <link rel="stylesheet" href="style.css"></head><body> <h1>IMAGE FOLDING EFFECT</h1> <ul class="un-list"> <li class="lis"></li> <li class="lis"></li> <li class="lis"></li> <li class="lis"></li> </ul></body></html> |
CSS Code: CSS is used to give different types of animations and effects to our HTML page so that it looks interactive to all users.
In CSS, we have to remember the following points.
- Restore all the browser effects.
- Use classes and ids to give effects to HTML elements.
- Use of nth-child() selector property to give different styles to different list items.
style.css
*{ 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;} .lis{ width: 100em; height: 30em; background-image: url( ); background-size: cover;} .lis:nth-child(even){ transform: skewY(-40deg);} .lis:nth-child(odd){ transform: skewY(40deg);} .lis:nth-child(1){ border-left: blanchedalmond 0.2em solid; background-position: 0; border-right: blanchedalmond 0.2em solid;} .lis:nth-child(2){ background-position: -8em; border-right: blanchedalmond 0.2em solid;}.lis:nth-child(3){ background-position: -16em; border-right: blanchedalmond 0.2em solid;}.lis:nth-child(4){ background-position: -24em; border-right: blanchedalmond 0.2em solid;} |
Output:
image folding effect
Please Login to comment...