An Interest In:
Web News this Week
- April 18, 2024
- April 17, 2024
- April 16, 2024
- April 15, 2024
- April 14, 2024
- April 13, 2024
- April 12, 2024
Some of Our Sources
- BoingBoing
- Mashable
- Joshua Blankenship
- The Logo Smith
- Spoon Graphics
- Fuel Your Creativity
- Web Designer Depot
- Wal You
- Dev To
- The Verge
Help Webnuz
Referal links:
Amazing Food Card with Hover/Effect using CSS & HTML
Hello guys, Today in this post, well 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.
Original Link: https://dev.to/codewithayan10/amazing-food-card-with-hovereffect-using-css-html-241d
Dev To
An online community for sharing and discovering great ideas, having debates, and making friendsMore About this Source Visit Dev To