Image transform on hover HTML and JavaScript only

Question

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.

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

 <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)" ;>
                        <div class="px-5 hoverChange px-sm-0"><img
                                src="https://i.postimg.cc/vmk0qLV1/Web-Development-Promotion-Instagram-Post.png"
                                class="smallBorder avatar" width="100%"></img></div>
                    </div>

score 0 · Answer 1 · answered Sep 05 '22 at 03:24

0

The only think I can think of is that the images are taking up to 1s to get. Using the web tools on your browser it's possible to see the network timings for each image. https://i.postimg.cc/vmk0qLV1/Web-Development-Promotion-Instagram-Post.png" took 1.3s to get and monster.png took about 1s to get.

The network request for monster.png only occurs at the hover event so it may be that it's just taking time to get the asset so you're not seeing the effect straight away.

A method for avoiding this behaviour has already been discussed here

answered Sep 05 '22 at 03:24

Adam

5,495
2
7
24

1

Thank you so much for pointing me in the right direction. This seems to have done the trick! `var element = document.getElementById('elemName'); var event = new MouseEvent('mouseover', { 'view': window, 'bubbles': true, 'cancelable': true }); element.dispatchEvent(event);` `#elemName{ /* ... */ } #elemName:hover{ /* change bg image */ }` – Wayne Sep 05 '22 at 05:39
Could you up vote my answer please. I need the reputation :-) – Adam Sep 05 '22 at 07:28

Image transform on hover HTML and JavaScript only

1 Answers1