Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to create Image Folding Effect using HTML and CSS?
The Image Folding Effect is a popular CSS technique that creates a visually appealing paper-folding animation on images. This effect divides an image into segments that skew when hovered, simulating the appearance of folded paper. It's achieved using CSS transforms and the :nth-child selector.
Transform Property
The CSS transform property applies 2D or 3D transformations to elements. It can move, rotate, scale, and skew elements without affecting the document flow.
Syntax
transform: function(value);
Common transform functions:
translate() moves an element along the x and y axis.
rotate() rotates an element around its origin.
scale() increases or decreases the size of an element.
skew() distorts an element along the x or y axis.
:nth-child Selector
The :nth-child selector targets elements based on their position within a parent element. It's essential for creating alternating effects in the folding animation.
Syntax
:nth-child(expression)
Where expression can be odd, even, or a formula like 2n+1.
Creating the Image Folding Effect
The folding effect works by dividing an image into segments using list items, then applying alternating skew transforms on hover. Each segment shows a different portion of the background image.
Example
The following example creates a folding effect with a gradient background ?
<!DOCTYPE html>
<html>
<head>
<style>
body {
margin: 0;
padding: 20px;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background-color: #f0f0f0;
}
.container {
width: 480px;
height: 270px;
display: flex;
list-style: none;
margin: 0;
padding: 0;
cursor: pointer;
}
.fold {
width: 25%;
height: 100%;
background: linear-gradient(45deg, #ff6b6b, #4ecdc4, #45b7d1, #96ceb4);
background-size: 400% 100%;
transition: transform 0.5s ease, box-shadow 0.5s ease;
}
.container:hover .fold:nth-child(odd) {
transform: skewY(15deg);
box-shadow: inset 20px 0 50px rgba(0,0,0, 0.5);
}
.container:hover .fold:nth-child(even) {
transform: skewY(-15deg);
box-shadow: inset -20px 0 50px rgba(0,0,0, 0.5);
}
.fold:nth-child(1) {
background-position: 0% 0;
}
.fold:nth-child(2) {
background-position: 33% 0;
}
.fold:nth-child(3) {
background-position: 66% 0;
}
.fold:nth-child(4) {
background-position: 100% 0;
}
h3 {
text-align: center;
color: #333;
margin-bottom: 30px;
}
</style>
</head>
<body>
<div>
<h3>Image Folding Effect - Hover to See Animation</h3>
<ul class="container">
<li class="fold"></li>
<li class="fold"></li>
<li class="fold"></li>
<li class="fold"></li>
</ul>
</div>
</body>
</html>
The output shows a colorful gradient strip that folds like paper when you hover over it ?
A rectangular gradient strip appears with four equal segments. On hover, odd-numbered segments skew upward (+15deg) while even-numbered segments skew downward (-15deg), creating a paper-folding effect with shadows for depth.
Key Components
Container: Uses flexbox to arrange segments horizontally
Segments: Each
<li>element represents one fold of the paperBackground positioning: Different segments show different parts of the image
Hover effects: Alternating skew transforms create the folding motion
Shadows: Add depth and realism to the folding effect
Conclusion
The Image Folding Effect combines CSS transforms, :nth-child selectors, and hover states to create an engaging paper-folding animation. This technique enhances user interaction and adds visual appeal to websites with minimal code.
1K+ Views
