UI Card Hover Effect Using HTML CSS

This tutorial blog to learn how to create Card Hover UI Effect using HTML and CSS.

Video tutorial of UI Card Hover Effect Using HTML CSS

This tutorial video to learn how to create Card Hover UI Effect using HTML and CSS.

UI Card Hover Effect Using HTML CSS [Source Codes]

This source code can help you to create UI Card Hover Effect Using 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>
<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="ui-card">
	<img src="images/pic1.jpg">
	<div class="description">
		<h3>Mountain Morning</h3>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod.</p>
		<a href="#">Read More</a>
	</div>
</div>
<div class="ui-card">
	<img src="images/pic2.jpg">
	<div class="description">
		<h3>Mountain Morning</h3>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod.</p>
		<a href="#">Read More</a>
	</div>
</div>
<div class="ui-card">
	<img src="images/pic3.jpg">
	<div class="description">
		<h3>Mountain Morning</h3>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod.</p>
		<a href="#">Read More</a>
	</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: #34aff3;
	display: flex;
	align-items: center;
	justify-content: space-around;
	min-height: 100vh;
}
img{
	max-width: 100%;
}
.ui-card{
	width: 350px;
	position: relative;
	overflow: hidden;
	transition: all 0.3s ease-out;
	background:radial-gradient(#111 50%, #000 100%);
}

.ui-card img{
	transform: scale(1.3);
	transition: all 0.3s ease-out;
}
.ui-card:hover img{
	transform: scale(1.1) translateY(-20px); 
	opacity: 0.3
}
.ui-card .description{
	position: absolute;
	bottom: 0;
	left: 0;
	padding: 15px;
	width: 100%;
	text-align: center;
	color: #fff;
	font-size: 18px;
}
.ui-card .description h3{
	font-weight: 700;
	font-size: 32px;
	margin: 0 0 20px;
	transform: translateY(30px);
	opacity: 0;
	transition: all 0.3s ease-out;

}
.ui-card .description p{
	transform: translateY(30px);
	opacity: 0;
	transition: all 0.3s ease-out 0.2s;
}
.ui-card .description a{
	color: #fff;
	background:#34aff3;
	display: inline-block;
	padding: 10px 25px;
	border-radius: 5px;
	text-decoration: none;
	transform: translateY(30px);
	opacity: 0;
	transition: all 0.3s ease-out 0.4s;
}
.ui-card .description a:hover{
	background:#0a83c5;
}
.ui-card:hover .description h3{
	opacity: 1;
	transform: translateY(0px);
}
.ui-card:hover .description p{
	opacity: 1;
	transform: translateY(0px);
}
.ui-card:hover .description a{
	opacity: 1;
	transform: translateY(0px);
}

UI Card Hover Effect Using HTML CSS

Video tutorial of UI Card Hover Effect Using HTML CSS

UI Card Hover Effect Using HTML CSS [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