Efecto de Desplazamiento a una imagen

by Slee

HTML

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>Efecto Desplazamiento</title>
    <link rel="stylesheet" href="estilos.css">
</head>
<body>
    <figure>
     <img src="https://cdn.pixabay.com/photo/2024/02/05/18/14/passenger-ship-8555025_1280.jpg" alt="Imagen">
    </figure>
</body>
</html>

CSS

*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
/*Codigo opcional*/
body{
width: 100%;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
 /*----Fin----*/
figure{
width: 350px;
height: 250px;
overflow: hidden;
cursor: pointer;
border-radius: 5px;
box-shadow: 1px 5px 25px rgba(0,0,0,0.5);
margin: 45px;
}
figure img{
width: 500px;
height: 100%;
transition:1.0s;
will-change: transform;
}
figure img:hover{
transform: translateX(-30%);
filter: brightness(80%);
}