diff --git a/components/TeamCard.tsx b/components/TeamCard.tsx
index e8ae2ab..0323693 100644
--- a/components/TeamCard.tsx
+++ b/components/TeamCard.tsx
@@ -14,24 +14,26 @@ function TeamCard(props: TeamCardProps): JSX.Element {
 
   return (
     <div className={styles['team-card']}>
-      {props.data.link ? (
-        <>
-          <a
-            data-tip
-            data-for={props.data.name}
-            target='_blank'
-            rel='noreferrer'
-            href={props.data.link}
-          >
-            {image}
-          </a>
-          <ReactTooltip id={props.data.name} className={styles['team-tooltip']} arrowColor='transparent' textColor='black' backgroundColor='#FFF740'>
-            {props.data.link.split('//').slice(-1)[0] + ' ↗'}
-          </ReactTooltip>
-        </>
-      ) : (
-        image
-      )}
+      <div className={styles.profile}>
+        {props.data.link ? (
+          <>
+            <a
+              data-tip
+              data-for={props.data.name}
+              target='_blank'
+              rel='noreferrer'
+              href={props.data.link}
+            >
+              {image}
+            </a>
+            <ReactTooltip id={props.data.name} className={styles['team-tooltip']} arrowColor='transparent' textColor='black' backgroundColor='#FFF740'>
+              {props.data.link.split('//').slice(-1)[0] + ' ↗'}
+            </ReactTooltip>
+          </>
+        ) : (
+          image
+        )}
+      </div>
       <h4 className={styles['team-title']}>{props.data.name}</h4>
       <p>{props.alumni ? 'ALUMNI' : `CLASS OF ${props.data.class}`}</p>
       {props.data.roles.map((role) => (
diff --git a/styles/Team.module.scss b/styles/Team.module.scss
index ab938d1..2ca7715 100644
--- a/styles/Team.module.scss
+++ b/styles/Team.module.scss
@@ -60,6 +60,32 @@
   object-fit: cover;
 }
 
+.profile {
+  height: 228px;
+  width: 228px;
+  position: relative;
+  overflow: hidden;
+
+  // this pseudo element allows us to animate the filter up
+  &::after {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+
+    // background-color + mix-blend-mode (color) allows for a colored filter (in our case its black)
+    background-color: #000;
+    mix-blend-mode: color;
+    transition: transform 0.2s ease-in-out;
+  }
+
+  &:hover::after {
+    transform: translateY(-100%);
+  }
+}
+
 @media only screen and (max-width: 1300px) {
   .team-cards {
     grid-template-columns: repeat(3, 33.33%);