I wanna automatical scale transforming-CodePudding

<!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 >
      <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 >
      <img src="bg.jpg">
   </div>
   <script>
      let container = $('.container');
      container.classList.add('animate');
   </script>
   </body>
</html>

CodePudding user response：

You can do that using javascript instead of

.container:hover img{
   transform: scale(1);
 }

Use

.animate{
   transform: scale(1);
 }

And inside you javascript code, call a function on body load and inside that function do

let container = $('.container');
container.classList.add('animate');

CodePudding user response：

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 >
   <img src="//picsum.photos/200">
</div>