Animation discrete sur le hover et changement de la photo
This commit is contained in:
parent
2f3f7edcf3
commit
9bb0855adc
File diff suppressed because one or more lines are too long
@ -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">
|
||||
|
@ -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;
|
||||
}
|
||||
|
BIN
src/images/headshot_fond.png
Normal file
BIN
src/images/headshot_fond.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 782 KiB |
BIN
src/images/headshot_main.png
Normal file
BIN
src/images/headshot_main.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 1.7 MiB |
Loading…
x
Reference in New Issue
Block a user