add missing hover animation details

packages/components/src/components/VideoPreview/VideoPreview.styles.tsx

@@ -1,6 +1,7 @@
 import styled from "@emotion/styled";
 import { colors, spacing, typography } from "./../../theme";
 import Avatar from "components/Avatar";
+import Play from "../../../assets/play.svg";
 
 const HOVER_BORDER_SIZE = "2px";
 
@@ -47,12 +48,18 @@ export const CoverHoverOverlay = styled.div`
 	transition: opacity 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
 
 	border: ${HOVER_BORDER_SIZE} solid ${colors.white};
+	background: linear-gradient(180deg, #000000 0%, rgba(0, 0, 0, 0) 100%);
 
 	display: flex;
 	justify-content: center;
 	align-items: center;
 `;
 
+export const CoverPlayIcon = styled(Play)`
+	transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
+	transform: translateY(40px);
+`;
+
 export const ProgressOverlay = styled.div`
 	position: absolute;
 	left: 0;
@@ -87,6 +94,10 @@ export const Container = styled.div<ContainerProps>`
 					${CoverHoverOverlay} {
 						opacity: 1;
 					}
+					
+					${CoverPlayIcon} {
+						transform: translateY(0);
+					}
 
 					${ProgressOverlay} {
 						bottom: ${HOVER_BORDER_SIZE};

packages/components/src/components/VideoPreview/VideoPreview.tsx

@@ -6,6 +6,7 @@ import {
 	CoverDurationOverlay,
 	CoverHoverOverlay,
 	CoverImage,
+	CoverPlayIcon,
 	InfoContainer,
 	MetaText,
 	ProgressBar,
@@ -14,7 +15,6 @@ import {
 	TextContainer,
 	TitleHeader,
 } from "./VideoPreview.styles";
-import Play from "../../../assets/play.svg";
 
 type VideoPreviewProps = {
 	title: string;
@@ -78,7 +78,7 @@ const VideoPreview: React.FC<Partial<VideoPreviewProps>> = ({
 					</ProgressOverlay>
 				)}
 				<CoverHoverOverlay>
-					<Play />
+					<CoverPlayIcon />
 				</CoverHoverOverlay>
 			</CoverContainer>
 			<InfoContainer>