Animation discrete sur le hover et changement de la photo

src/components/MainCard/MainCard.js

@@ -6,7 +6,8 @@ import ExperienceCard from '../ExperienceCard/index';
 import ButtonIcon from '../ButtonIcon/index';
 
 import './MainCard.scss'
-import photoProfil from '../../images/profile_opt.png';
+import headshotMain from '../../images/headshot_main.png';
+import headshotFond from '../../images/headshot_fond.png';
 
 class MainCard extends Component {
     render() {
@@ -22,7 +23,8 @@ class MainCard extends Component {
                       <div class="card">
                           <div class="card-image">
                               <figure id="photoProfil" class="image">
-                                  <img src={photoProfil} alt="Anthony Dumas"/>
+                                  <img class="background" src={headshotFond} alt="Anthony Dumas"/>
+                                  <img class="actor" src={headshotMain} alt="Anthony Dumas"/>
                               </figure>
                           </div>
                           <div class="card-content">

src/components/MainCard/MainCard.scss

@@ -1,4 +1,21 @@
+@import '../../_sass/main.scss';
 
-.component-main-card{
-    
-}
+#photoProfil {
+  overflow: clip;
+  border: 1px solid #3c3c3c;
+
+  .background {
+    position: absolute;
+    filter: blur(2px);
+    opacity: 50%
+  }
+}
+
+@keyframes actorZoom {
+    from { transform: scale(100%); }
+    to   { transform: scale(110%); }
+  }
+
+#photoProfil:hover .actor {
+    animation:4s linear 0s infinite alternate actorZoom;
+}