Made it hover on image too (#442)

* Made it hover on image too

Fixed Hover issue by adding onMouseEnter directly to GatsbyImage

* Removed vertical translation

Followed revisions suggested in PR #442, removed hoverTranslation, added in classes.banner for IOS, and used pointerEvents instead of &hover for the GatsbyImage

* Added back vertical translation

* Removed excess code comments

Author: SPerrott22

src/components/EventCard/EventCard.js

@@ -119,18 +119,20 @@ function EventCard({
 				[classes.greyOverlay]: disabled,
 				[classes.hoverTranslation]: isHover
 			})}
-			onMouseEnter={() => setIsHover(true)}
 			onMouseLeave={() => setIsHover(false)}
+			onMouseEnter={() => setIsHover(true)}
 		>
-			{/* Empty string added as child to squelch CardMedia warning */}
-			<CardMedia classes={{ root: classes.banner }}>
+			<CardMedia classes={{ root: classes.banner }}
+			>
 				<GatsbyImage
 					image={imgFile.childImageSharp.gatsbyImageData}
 					style={{
 						position: 'relative',
 						zIndex: 1,
-						borderRadius: theme.shape.borderRadius * 2
+						borderRadius: theme.shape.borderRadius * 2,
+						pointerEvents: 'none'
 					}} // iOS border radius
+					onMouseEnter={() => setIsHover(true)}
 				/>
 			</CardMedia>
 			<CardContent>