diff --git a/src/index.css b/src/index.css
index 7a9b6092312..286a7f284b3 100644
--- a/src/index.css
+++ b/src/index.css
@@ -74,7 +74,3 @@ body {
 .noBorder {
   border: none;
 }
-
-.staff-avatar:hover .avatar-hover {
-  opacity: 1;
-}
diff --git a/src/staff/components/StaffProperties/StaffProperties.tsx b/src/staff/components/StaffProperties/StaffProperties.tsx
index 59d550e67db..5bf9ccf0b37 100644
--- a/src/staff/components/StaffProperties/StaffProperties.tsx
+++ b/src/staff/components/StaffProperties/StaffProperties.tsx
@@ -76,7 +76,6 @@ const StaffProperties: React.FC<StaffPropertiesProps> = props => {
               position="relative"
               __height="120px"
               __width="120px"
-              className="staff-avatar"
             >
               {hasAvatar ? (
                 <Box as="img" pointerEvents="none" width="100%" src={staffMember.avatar.url} />
@@ -101,9 +100,11 @@ const StaffProperties: React.FC<StaffPropertiesProps> = props => {
               )}
               {canEditAvatar && (
                 <Box
-                  className="avatar-hover"
                   borderRadius="100%"
-                  opacity="0"
+                  opacity={{
+                    hover: "1",
+                    default: "0",
+                  }}
                   position="absolute"
                   padding={4}
                   __height="120px"