Hello guys, Today in this post, we’ll learn How to Create an Amazing Food Card with amazing Hover Effect using CSS and HTML. To create it we are going to use simple CSS and HTML. Hope you enjoy this post.
Food Cards play a key role in increasing the engagement of a Food selling website. Food Cards display the image, showing the appearance of food. They allow users to see the price and easily order the food.
Any movement of the Card when hovered signs users of a response-giving website. This makes the User Experience better. You can be creative with it and make your Food Cards interactive in a way that adds a good experience for the users.
Demo
Click to watch demo!
Amazing Food Card HTML CSS (source code)
HTML Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="single-menu">
<img src="hamBurger.jpg" alt="zinger-burger">
<div class="content">
<h2>Plain fries<span>100rs</span></h2>
<p>Crisp to teeth, our in house made French fries.</p>
</div>
</div>
</body>
</html>
CSS Code
body{
background-color: #000;
color: #fff;
display: flex;
justify-content: center;
align-items: center;
height: 100vh ;
}
.single-menu{
display: flex;
align-items: center;
flex-direction: column;
}
.single-menu:hover img{
border-radius: 50%;
}
.single-menu img{
max-width: 250px;
margin-right: 25px;
border: 1px solid #ddd;
padding: 3px;
transition: .5s;
}
.single-menu h2{
color: red;
text-transform: capitalize;
font-size: 21px;
margin-bottom: 6px;
padding-bottom: 5px;
}
.single-menu p{
font-size: 15px;
}
.single-menu span{
float: right;
color: rgb(238, 9, 9);
font-style: italic;
}
Congratulations! We have now successfully created our Amazing Food Card with a simple Hover Effect
My Website: codewithayan, see this to checkout all of my amazing Tutorials.
Top comments (0)