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%);

}

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%); }

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>

<head>

<title>Document</title>

</head>

<body>

</section>

</body>

</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>

<!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

Post relacionados:

#trucos