Animation discrete sur le hover et changement de la photo

This commit is contained in:
Anthony Dumas 2022-01-20 00:27:29 +01:00
parent 2f3f7edcf3
commit 9bb0855adc
5 changed files with 25 additions and 6 deletions

File diff suppressed because one or more lines are too long

View File

@ -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">

View File

@ -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;
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 782 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.7 MiB