I wanna automatical scale transforming

Issue

<!DOCTYPE html>
<html lang="en" dir="ltr">
   <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <title>Multi Step Form</title>
      <script
        src="https://code.jquery.com/jquery-3.6.0.js"
        integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk="
        crossorigin="anonymous">
      </script>
      <script src="index.js"></script>

      <link rel="stylesheet" href="index.css">
   </head>
   <body>
    <!--zoom animate-->
    <div class="container">
      <img src="bg.jpg">
   </div>
   <script>
      let container = $('.container');
      container.classList.add('animate');
   </script>
   </body>
</html>
.container{
  position: absolute;
  left: 10%;
  top:10%;
  width: 200px;
  height: 200px;
  margin: 0px auto;
  overflow: hidden;
}

img{

  max-width: 100%;
  transition: all 0.2s linear;
  transform: scale(1.5);
}

.animate{
  transform: scale(1);
}

I was editing the code like Embeding javascript in the body tag, and changing .container:hover img to .animate. But this code is not working because of Uncaught TypeError: Cannot read properties of undefined (reading ‘add’). I don’t know why Uncaught TypeError has occured, and still don’t know what the problem is. Please help.

.container{
  position: absolute;
  left: 10%;
  top:10%;
  width: 200px;
  height: 200px;
  margin: 0px auto;
  overflow: hidden;
}

img{

  max-width: 100%;
  transition: all 0.2s linear;
  transform: scale(1.5);
}

.animate{
  transform: scale(1);
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
   <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <title>Multi Step Form</title>
      <script
        src="https://code.jquery.com/jquery-3.6.0.js"
        integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk="
        crossorigin="anonymous">
      </script>
      <script src="index.js"></script>

      <link rel="stylesheet" href="index.css">
   </head>
   <body>
    <!--zoom animate-->
    <div class="container">
      <img src="bg.jpg">
   </div>
   <script>
      let container = $('.container');
      container.classList.add('animate');
   </script>
   </body>
</html>

Solution

You can use a basic animation to get the desired result on page load.

.container{
  position: absolute;
  left: 0;
  top:0;
  width: 200px;
  height: 200px;
  margin: 0px auto;
  overflow: hidden;
}

img{
  max-width: 100%;
  animation: zoomout 0.2s linear;
}

@keyframes zoomout {
  0% {
    transform: scale(1.5);
  }
  100% {
    transform: scale(1);
  }
}
<div class="container">
   <img src="//picsum.photos/200">
</div>

Answered By – Reyno

Answer Checked By – Candace Johnson (AngularFixing Volunteer)

Leave a Reply

Your email address will not be published.