Added hover effect

asyncapi · Sep 1, 2023 · c521922 · c521922
1 parent b1d5ee6
commit c521922
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 1 deletion.
diff --git a/components/Venue/venue.js b/components/Venue/venue.js
@@ -9,7 +9,7 @@ function Venue({ className, city }) {
 		<Link href={`/venue/${city.name}`}>
 			<div className={`w-[500px] cursor-pointer sm:w-auto ${className}`}>
 				<div className='w-[450px] sm:w-auto sm:h-[320px] card-bg flex items-center justify-center p-10'>
-					<img src={city.img} className='sm:w-[350px] h-[250px] rounded-lg' />
+					<img src={city.img} className='sm:w-[350px] h-[250px] rounded-lg hoverEffect' />
 				</div>
 
 				<div className='mt-[24px] w-[450px] sm:w-full'>

diff --git a/styles/globals.css b/styles/globals.css
@@ -265,3 +265,11 @@ mix-blend-mode: lighten;
     0% {transform: translateX(0)}
     100% {transform: translateX(200%)}
 }
+
+.hoverEffect{
+  transition: transform 0.3s ease-in-out; /* Add a smooth transition effect */
+}
+
+.hoverEffect:hover {
+  transform: scale(1.1); /* Scale the image by 10% on hover */
+}