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>