CSS 및 HTML을 사용한 호버/효과가 있는 놀라운 음식 카드

2752 단어
안녕하세요 여러분, 오늘 이 게시물에서는 Amazing Food Card with amazing Hover Effect using CSS and HTML을 만드는 방법을 배웁니다. 그것을 만들기 위해 우리는 간단한 CSS와 HTML을 사용할 것입니다. 이 게시물을 즐기시기 바랍니다.

식품 카드는 식품 판매 웹사이트의 참여도를 높이는 데 핵심적인 역할을 합니다. 음식 카드는 음식의 모습을 보여주는 이미지를 표시합니다. 사용자가 가격을 확인하고 쉽게 음식을 주문할 수 있습니다.

호버링 시 카드의 모든 움직임은 응답 제공 웹사이트의 사용자를 표시합니다. 이것은 사용자 경험을 더 좋게 만듭니다. 창의력을 발휘하고 사용자에게 좋은 경험을 추가하는 방식으로 음식 카드를 대화식으로 만들 수 있습니다.

데모



Click 데모 보기!

놀라운 음식 카드 HTML CSS(소스 코드)



HTML 코드

<!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 코드

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;
    }


축하합니다! 이제 간단한 호버 효과로 Amazing Food Card 을 성공적으로 만들었습니다.

내 웹사이트: codewithayan , 내 모든 놀라운 자습서를 확인하려면 여기를 참조하십시오.
구성할 수 있는 짧은 바벨 메모!
【Angular Material】`mat-icon`을 동적으로 표시하고 싶다

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage