CSS:
section {
display: flex;
width: 600px;
height: 430px;
}
section img {
width: 0px;
flex-grow: 1;
object-fit: cover;
opacity: .8;
transition: .5s ease;
}
section img:hover {
width: 300px;
opacity: 1;
filter: contrast(120%);
}
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<section>
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSCqDOFP2Me4tr50N2TafCj8qQnhTJB76Gwyg&s">
<img src="https://blog.foto24.com/wp-content/uploads/2019/02/6-fotografia-de-Alejandro-Rodriguez-683x1024.jpg">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS_wrOrFCjVA_uUnxn3PzBQMULjeK4JuctWRQ&s">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSCqDOFP2Me4tr50N2TafCj8qQnhTJB76Gwyg&s">
</section>
<script></script>
</body>
</html>
RESULTADO:
¿Te ha resultado útil??
0 / 0
Entradas relacionadas: