Code With Ayan

Amazing Food Card with Hover/Effect using CSS & HTML

Amazing Food Card with Hover/Effect using CSS & HTML

Ayan Saif's photo
Ayan Saif
·

2 min read

Table of contents

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 check out all of my amazing Tutorials.

webdevWeb DevelopmentHTML5CSSCSS3