0

I have a very long image that I want to animate (translate) found some code that helped me to make an animation but not sure is it possible to merge it with hover on another DIV where are arrows

is it possible to do that without any JS? here is CODEPEN

and code so far:

.wrapper {
  overflow: hidden;
  position: relative;
}

.arrow-left {
  position: absolute;
  top: 0;
  height: 100%;
  background: linear-gradient(to right, blue, transparent);
  width: 200px;
}

.arrow-left:hover~.sliding-background {
  animation-direction: reverse;
}

.arrow-right {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  background: linear-gradient(to left, red, transparent);
  width: 200px;
}

.sliding-background {
  background: url("https://upload.wikimedia.org/wikipedia/commons/6/62/Element-haeufigkeit.svg");
  height: 500px;
  width: 3000px;
  animation: slide 8s linear;
}

@keyframes slide {
  0% {
    transform: translate3d(0, 0, 0);
  }
  100% {
    transform: translate3d(-1000px, 0, 0px);
  }
}
<div class="wrapper">
  <div class="sliding-background"></div>
  <div>
    <img class="arrow-left" src="https://www.materialui.co/materialIcons/hardware/keyboard_arrow_left_black_144x144.png" />
    <img class="arrow-right" src="https://www.materialui.co/materialIcons/hardware/keyboard_arrow_right_black_144x144.png" />
  </div>
</div>
Code_Ninja
  • 1,633
  • 1
  • 12
  • 32
Night5talker
  • 451
  • 1
  • 7
  • 22
  • Maybe this could help: https://codepen.io/Zeaklous/pen/sFnyD – rojadesign Jul 05 '18 at 13:28
  • 2
    your idea from the selector is the good one, but img to hover should stand ahead in the HTML flow. https://codepen.io/gc-nomade/pen/GGazNR – G-Cyrillus Jul 05 '18 at 13:28
  • @G-Cyr nice, manage to connect more stuff to it - for some reason when it comes to end it jumps to start and everything stops working, can you take a look? – Night5talker Jul 05 '18 at 13:56
  • If it is on hover that you want it to slide only, then i would suggest transition instead animation, so it will not jump all over the place ;) This is another question that i can answer too. your selector / structure trouble seems to be solved here. – G-Cyrillus Jul 05 '18 at 14:12
  • @G-Cyr thanks on support, managed to do it with animation... all except "remember position" when hover ends – Night5talker Jul 05 '18 at 14:17
  • okay, for info, here is the transition method : https://codepen.io/gc-nomade/pen/GGazNR ;) – G-Cyrillus Jul 05 '18 at 14:25
  • @G-Cyr feel free to set it as solution (left and right arrows are reversed but I get the point, its much cleaner with translations) – Night5talker Jul 05 '18 at 14:39
  • Your question is a duplicate, no answers can be added, beside, it doesn't refer to the question itself, but only to the next step once the question was solved out . ;) – G-Cyrillus Jul 05 '18 at 14:43

0 Answers0