CSS Transform Effect on Image | Transform skew Effect on Image using CSS3

This tutorial blog to learn how to create Image skew Effect using CSS.

Video tutorial of Transform skew Effect on Image using CSS3

This tutorial video to learn how to create Image skew Effect using CSS.

Transform skew Effect on Image using CSS3 [Source Codes]

This source code can help you to create Transform skew Effect on Image using CSS3.

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="image_transform_wrap">
	<div class="image_transform">
		<img src="images/pic1.jpg" alt="">
		<div class="image_transform_content">
			<h2>Welcome To Invention Tricks</h2>
		</div>
	</div>
</div>

<div class="image_transform_wrap">
	<div class="image_transform">
		<img src="images/pic2.jpg" alt="">
		<div class="image_transform_content">
			<h2>Welcome To Invention Tricks</h2>
		</div>
	</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: #fff;
}
img{
	max-width: 100%;
}
.image_transform_wrap{
	padding: 100px 0;
}
.image_transform{
	position: relative;
	height: 500px;
	overflow: hidden;
	transform: skewY(7deg);
}
.image_transform img{
	position: relative;
	top: 50%;
	transform: translateY(-50%) skewY(-7deg);
}
.image_transform_content{
	position: absolute;
	width: 100%;
	left: 0;
	top: 50%;
	transform: translateY(-50%) skewY(-7deg);
	font-size: 50px;
	color: #fff;
	text-shadow: 1px 1px 1px #000;
	z-index: 1;
	text-align: center;
}
.image_transform_content h2{
	margin: 0;
	padding: 20px;
	position: relative;
}
.image_transform_content h2:after,
.image_transform_content h2:before{
	content: "";
	position: absolute;
	top: 0;
	left: 50%;
	width: 400px;
	height: 3px;
	background:#fff;
	transform: translateX(-50%);
}
.image_transform_content h2:before{
	top: auto;
	bottom: 0
}

CSS Transform Effect on Image | Transform skew Effect on Image using CSS3

Video tutorial of Transform skew Effect on Image using CSS3

Transform skew Effect on Image using CSS3 [Source Codes]

Build a Stop-Watch Web App Using JavaScript

Build Loan EMI Calculator DIY Finance Tool using JavaScript

Navigation Menu Click to Single Page Website Smooth Scrolling Using jQuery