Test JQ

by tascam424

HTML

<!DOCTYPE html>
<html>

  <body>

    <div class="parent">

      <div class="target">

        <div class="cake">

          <img src="https://placehold.jp/ffffff/36a3f7/150x40.png?text=1&css=%7B%22border%22%3A%22%205px%20solid%20%2336a3f7%22%7D">
          <img src="https://placehold.jp/ffffff/36a3f7/150x40.png?text=2&css=%7B%22border%22%3A%22%205px%20solid%20%2336a3f7%22%7D">
          <img src="https://placehold.jp/ffffff/36a3f7/150x40.png?text=3&css=%7B%22border%22%3A%22%205px%20solid%20%2336a3f7%22%7D">
          <img src="https://placehold.jp/ffffff/36a3f7/150x40.png?text=4&css=%7B%22border%22%3A%22%205px%20solid%20%2336a3f7%22%7D">
          <img src="https://placehold.jp/ffffff/36a3f7/150x40.png?text=5&css=%7B%22border%22%3A%22%205px%20solid%20%2336a3f7%22%7D">

        </div>

        <div class="move">

          <span class="a"><img src="https://placehold.jp/100/000000/ffffff/150x150.png?text=1&css=%7B%22border-radius%22%3A%2250%25%22%7D"></span>
          <span call="a"><img src="https://placehold.jp/100/000000/ffffff/150x150.png?text=2&css=%7B%22border-radius%22%3A%2250%25%22%7D"></span>
          <span class="a"><img src="https://placehold.jp/100/000000/ffffff/150x150.png?text=3&css=%7B%22border-radius%22%3A%2250%25%22%7D"></span>
          <span class="a"><img src="https://placehold.jp/100/000000/ffffff/150x150.png?text=4&css=%7B%22border-radius%22%3A%2250%25%22%7D"></span>
          <span class="b"><img src="https://placehold.jp/100/000000/ffffff/150x150.png?text=5&css=%7B%22border-radius%22%3A%2250%25%22%7D"></span>

        </div>

      </div>

      <div class="slide">

        <img src="https://placehold.jp/10/000000/ffffff/150x30.png?text=Pellentesque%20sodales%20arcu.">
        <img src="https://placehold.jp/10/000000/ffffff/150x30.png?text=Pellentesque%20sodales%20arcu.">
        <img src="https://placehold.jp/10/000000/ffffff/150x30.png?text=Pellentesque%20sodales%20arcu.">
        <img...

CSS

.target {
  padding-top: 350px;
  width: 1024px;
  height: 800px;
  margin-left: 250px;
}

.move img {
  width: 50px;
}

.move {
  font-size: 55px;
  top: 45px;
  position: relative;
  display: inline-block;
}

.move span {
  position: relative;
  display: inline-block;
}

@keyframes move {
  0.0% {
    transform: scale(1) translate(-0px, 0) skew(0deg);
  }

  100% {
    transform: scale(1) translate(0%, 0) skew(0deg) rotate(90deg);
  }
}

@keyframes rotate {
  0.0% {
    transform: scale(1) translate(-0px, 0) skew(0deg);
  }

  100% {
    transform: scale(1) translate(0px, 0px) skew(0deg) rotate(-90deg);
  }
}

.parent:hover .move {
  animation-name: move;
  animation-duration: 1.2s;
  animation-timing-function: ease;
  animation-fill-mode: forwards;
}

.parent:hover .move span {
  animation-name: rotate;
  animation-duration: 1.2s;
  animation-timing-function: ease;
  animation-fill-mode: forwards;
}


.slide {
    position: absolute;
    right: -600px;
    top: 250px;
    width: 600px;
    height: 370px;
}

.slide img {
  margin-top: 35px;
  display: block;
}

@-webkit-keyframes slide {
    100% { right: 0; }
}

@keyframes slide {
    100% { right: 0; }
}

.parent:hover .slide {
  animation-name: slide;
  animation-duration: 1s;
  animation-timing-function: ease;
  animation-delay: 0.2s;
  animation-fill-mode: forwards;
}

.cake {
  position: relative;
  left: -150px;
  top: 50px;
}
.cake img {
  position: absolute;
  top: 0;
  left: 0;
  max-width: 300px;
}
.parent:hover .cake img:first-child {
  top: -200px;
  transition: top 1.2s ease-in-out;
}

.parent:hover .cake img:nth-child(2) {
  top: -100px;
  transition: top 1.2s ease-in-out;
}

.parent:hover .cake img:nth-child(3) {
  top: 0px;
}

.parent:hover .cake img:nth-child(4) {
  top: 100px;
  transition: top 1.2s ease-in-out;
}

.parent:hover .cake img:last-child {
  top: 200px;
  transition: top 1.2s ease-in-out;
}

.hover {
  position: absolute;
  bottom: 100px;
  border: 10px solid red;
 ...