From 12a521037689dc6864bf901605144a4d2c74387e Mon Sep 17 00:00:00 2001
From: Mesut Biskin <msbiskin@gmail.com>
Date: Tue, 31 Oct 2023 10:29:39 -0400
Subject: [PATCH] the Image hover changed to 20%

---
 src/App.css                 | 9 +++++++++
 src/components/BeerCard.jsx | 1 +
 2 files changed, 10 insertions(+)

diff --git a/src/App.css b/src/App.css
index f526e98..743d7fe 100644
--- a/src/App.css
+++ b/src/App.css
@@ -32,9 +32,18 @@ main {
   width: 260px;
 }
 
+.beer-card:hover{
+  transform:scale(1.2);
+}
+
 .beer-image {
   width: 100%;
   max-height: 500px;
+  
+}
+
+.beer-image:hover{
+  transform: scale(1.2);
 }
 
 .close-button {
diff --git a/src/components/BeerCard.jsx b/src/components/BeerCard.jsx
index 7de9389..cc72dd8 100644
--- a/src/components/BeerCard.jsx
+++ b/src/components/BeerCard.jsx
@@ -5,6 +5,7 @@ export default function BeerCard({ name, image, avgRating, setSelectedBeer }) {
   if(hidden) return null
   return (
     <div className="beer-card" onClick={() => setSelectedBeer(name)}>
+      
       <div className="close-button" onClick={() => setHidden(true)}>x</div>
       <div className="beer-image">
         <img src={image} alt={name}