Card Hover Image Slice Effect With HTML CSS

Card Hover Image Slice Effect With HTML CSS.

This tutorial video to learn how to create card hover to image slice effect using HTML and CSS. There we use CSS transform effect and background image positioning for this card hover effect.

Video tutorial of Card Hover Effect Using HTML CSS | Card Hover Image Slice Effect With HTML CSS

This tutorial video can help you to create Card Hover Image Slice Effect With HTML CSS

Card Hover Effect Using HTML CSS | Card Hover Image Slice Effect With HTML CSS [Source Codes]

This source code can help you to create Card Hover Effect Using HTML CSS | Card Hover Image Slice Effect With HTML CSS

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="container">
		<div class="column">
			<div class="card">
				<img src="images/pic1.jpg">
				<div class="over_pic" style="background-image:url(images/pic1.jpg);"></div>
				<div class="over_pic" style="background-image:url(images/pic1.jpg);"></div>
				<div class="over_pic" style="background-image:url(images/pic1.jpg);"></div>
				<div class="over_pic" style="background-image:url(images/pic1.jpg);"></div>
				<div class="description">
					<h3>New Card Effect</h3>
					<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
					tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p>
					<a href="#">Read More</a>
				</div>
			</div>
		</div>
		<div class="column">
			<div class="card">
				<img src="images/pic1.jpg">
				<div class="over_pic" style="background-image:url(images/pic1.jpg);"></div>
				<div class="over_pic" style="background-image:url(images/pic1.jpg);"></div>
				<div class="over_pic" style="background-image:url(images/pic1.jpg);"></div>
				<div class="over_pic" style="background-image:url(images/pic1.jpg);"></div>
				<div class="description">
					<h3>New Card Effect</h3>
					<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
					tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p>
					<a href="#">Read More</a>
				</div>
			</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: linear-gradient(to bottom right,#39f6ff , #e334fa);
	min-height: 100vh;
	display: flex;
	align-items: center;
	justify-content: space-around;
}
.container{
	width: 100%;
	max-width: 1200px;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
.column{
	flex: 0 0 46%;
}

.card{
	border:1px solid;
	position: relative;
	background: #000;
	overflow: hidden;
}
.card img{
	max-width: 100%;
	vertical-align: top;
	opacity: 0
}
.description{
	position: absolute;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	padding: 30px;
	color: #fff;
	text-align: center;
	font-size: 20px;
	line-height: 1.4;
	display: flex;
	align-items: center;
	justify-content: center;
	align-content: center;
	flex-wrap: wrap;
	transition: all 0.7s ease-out;
	transform: scale(0.6);
	opacity: 0
}
.description h3{
	font-size: 26px;
	margin:0;
}
.description a{
	display: inline-block;
	padding: 8px 20px;
	text-decoration: none;
	color: #fff;
	background: #04098d;
}
.card:hover .description{
	opacity: 1;
	transform: scale(1);
}

.over_pic{
	position: absolute;
	width: 50%;
	height: 50%;
	background-size: 200% 200%;
	transition: all 0.7s ease-out;
	z-index: 2;
}

.over_pic:nth-of-type(1){
	left: 0;
	top: 0;
	background-position: left top;
}
.card:hover .over_pic:nth-of-type(1){
	transform: translate(-100%, -100%);
}
.over_pic:nth-of-type(2){
	right: 0;
	top: 0;
	background-position: right top;
}
.card:hover .over_pic:nth-of-type(2){
	transform: translate(100%, -100%);
}
.over_pic:nth-of-type(3){
	left: 0;
	bottom: 0;
	background-position: left bottom;
}
.card:hover .over_pic:nth-of-type(3){
	transform: translate(-100%, 100%);
}
.over_pic:nth-of-type(4){
	right: 0;
	bottom: 0;
	background-position: right bottom;
}
.card:hover .over_pic:nth-of-type(4){
	transform: translate(100%, 100%);
}