I have four images revolving around a central point, like a ferris wheel. Each image is a link to a video; when the user hovers over them, they should decrease opacity and allow the user to click the link to that video. Here is an example of one such image. When I open the file in any browser, that image does not change on hover, nor does it appear linked to anything.

HTML:

<a href="https://www.youtube.com/example" target="_blank"><img class="animated" src="images/example.jpg" alt="onevideo"/></a>

CSS:

a img.animated{
  position: absolute;
  animation: example 10s linear infinite;
  border-radius: 10px;
}

a:hover img.animated{
  opacity: 80%;
}

@keyframes example{
    0%{transform: translate(65%, -280%);}
  8.2%{transform: translate(77%, -340%);}
  16.5%{transform: translate(112%, -383%);}
  25%{transform: translate(160%, -400%);}
  33.2%{transform: translate(208%, -383%);}
  41.5%{transform: translate(238%, -340%);}
  50%{transform: translate(250%, -280%);}
  58.2%{transform: translate(238%, -220%);}
  66.5%{transform: translate(208%, -167%);}
  75%{transform: translate(160%, -150%);}
  88.2%{transform: translate(112%, -167%);}
  96.5%{transform: translate(77%, -220%);}
  100%{transform: translate(65%, -280%);}
}

Each image has absolute position because they’re placed in front of a larger image (this is also why the transform values are so extreme). I’m sure there are better ways to do something like this, but I’m largely self-taught and this is just a pet project, so I’m more concerned about the faulty links than the janky animation.