title: Image transform on hover HTML and JavaScript only
body: <p>The transform seems to work ok, but I've noticed that on the initial hover or touch the image doesn't open properly. After the initial touch or hover everything seems to function great. Thanks in advance for any assistance with what I hope is a simple fix.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body {
    background: #000000;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;  
  }
  
  
  .hoverChange:hover {
    content: url("https://i.postimg.cc/CL7mTV8p/monster.png");
    width: 100%;
    -moz-transform: scale(2.2) rotatez(-5deg);
    -webkit-transform: scale(2.2) rotatez(-5deg);
    -o-transform: scale(2.2) rotatez(-5deg);
    -ms-transform: scale(2.2) rotatez(-5deg);
    transform: scale(2.2) rotatez(-5deg);
    cursor: crosshair;
    -webkit-transition: .7s;
    -moz-transition: .7s;
    -o-transition: .7s;
    -ms-transition: .7s;
    transition: .7s;
    translate: -100px -100px;
    /* When the animation is finished, start again */
    animation-iteration-count: infinite;
    
  }
  
  .avatar {
    transform: translatey(0px);
    animation: float 5s ease-in-out infinite;
  
  }
  
  .avatar {
    transform: translatey(0px);
    animation: float 5s ease-in-out infinite;
  
  }
  
  @keyframes float {
    0% {
  
      transform: translatey(0px);
    }
  
    50% {
  
      transform: translatey(-15px);
    }
  
    100% {
  
      transform: translatey(0px);
    }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code> &lt;div class="col-sm-8 col-md-6 monster mb-5" data-animation="slideInLeft"
                          style="background-image: url(https://i.postimg.cc/NjPDF7bN/photo-1620207418302-439b387441b0.jpg)" ;&gt;
                          &lt;div class="px-5 hoverChange px-sm-0"&gt;&lt;img
                                  src="https://i.postimg.cc/vmk0qLV1/Web-Development-Promotion-Instagram-Post.png"
                                  class="smallBorder avatar" width="100%"&gt;&lt;/img&gt;&lt;/div&gt;
                      &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>