Bonjour,
Un petit problème… pour vous 
J’aime beaucoup l’orange avec ses dents de lapin 
Je tente de dissocier une image de son texte lors de l’animation. Actuellement, lors du :hover la photo descend… le texte aussi. Comment faire pour que le texte monte, ou l’inverse : que la photo monte et que le texte descende ?
Mon code :
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Document sans nom</title>
<style>
.amber{
position: absolute;
top:0;
left: 0;
display: block;
}
.amber img{
width: auto;
height: 100vh;
object-fit: cover;
filter: grayscale(100%) contrast(120%);
box-shadow: 10px 15px 25px 0 rgba(0,0,0,.2);
display: block;
transition: all .5s cubic-bezier(0.645, 0.045, 0.355, 1);
margin-top: -100px;
margin-left: 200px;
}
.amber:hover img{
box-shadow: 1px 1px 10px 0 rgba(0,0,0,.1);
margin-top: 0;
margin-left: 80%;
}
amber h1{
position: absolute;
z-index: 1;
transform: translate(100%, -1000%);
font-family: 'Montserrat', sans-serif;
margin: 0;
}
</style>
</head>
<body>
<a href="#" class="amber">
<img src="https://s-media-cache-ak0.pinimg.com/736x/06/d1/5f/06d15fc8a69e2ab67143e5357a4184d7.jpg" /><h1>Amber Heard</h1>
</a>
</body>
</html>
Merci et bonne soirée à vous, PLS
+0
-0