Animación imágenes – Apuntes Sin Límites

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

#trucos