CSS Image Hover Folded Effect | Image Folded Effect on Hover using CSS

This tutorial blog to learn how to create image folded effect using HTML and CSS.

Video tutorial of CSS Image Hover Folded Effect

This tutorial video to learn how to create image folded effect using HTML and CSS.

CSS Image Hover Folded Effect [Source Codes]

This source code can help you to create CSS Image Hover Folded Effect

You can also download this source code through the given link. Click here to download source code

HTML Code

Copy

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=1">
<title>Home</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>

<div class="img_box_area">
	<div class="img_box"></div>
	<div class="img_box"></div>
	<div class="img_box"></div>
	<div class="img_box"></div>
	<div class="img_box"></div>
</div>



</body>
</html>

CSS Code

Copy

*,*:after,*:before{
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
}
body{
	font-family: arial;
	font-size: 16px;
	margin: 0;
	background: #000;
	min-height: 100vh;
	display: flex;
	align-items: center;
	justify-content: space-around;
}
.img_box_area{
	display: flex;
	width: 90%;
	height: 60vh;
	position: relative;
	transition: all 1s ease-in-out;
}
.img_box{
	flex:0 0 20%;
	background:url('../images/pic1.jpg');
	background-size: 500%;
	transition: all 1s ease-in-out;
} 
body:hover .img_box_area{
	transform: scaleX(0.8);
}
.img_box:nth-child(1){
	border-radius: 30px 0 0 30px;
	background-position: 0% center
}
.img_box:nth-child(2){
	background-position: 25% center
}
.img_box:nth-child(3){
	background-position: 50% center
}
.img_box:nth-child(4){
	background-position: 75% center
}
.img_box:nth-child(5){
	border-radius: 0 30px 30px 0;
	background-position: 100% center
}

body:hover .img_box:nth-child(odd){
	transform: skewY(16deg);
}
body:hover .img_box:nth-child(even){
	transform: skewY(-16deg);
	filter: brightness(0.65);
}

CSS Image Hover Folded Effect | Image Folded Effect on Hover using CSS

Video tutorial of CSS Image Hover Folded Effect

CSS Image Hover Folded Effect [Source Codes]

Build a Stop-Watch Web App Using JavaScript

Navigation Menu Click to Single Page Website Smooth Scrolling Using jQuery

Text Animation Effect using HTML and CSS