Show hidden content when hovering a div - html

Question

How can i create this animation on this website:
https://www.beepi.com/
When you hover on the blue and green circle makes that animation, i want to do the same with this design:
What should i use and do it? Any tutorials, guides, something ? That i can see and be capable to implement it on my site.

Answer 1

I tried to make that effect. Here's what I've done:DEMO JsFiddle.
function js1(x) {
x.style.animation = "anime 5s";
}
function js2(x) {
x.style.animation = "anime1 5s";
}
#first {
position: absolute;
float: left;
width: 100px;
height: 100px;
background-color: black;
top: 200px
}
#sec {
position: relative;
float: right;
width: 100px;
height: 100px;
background-color: black;
top: 200px
}
#Keyframes anime {
from {
left: 0;
}
to {
left: -400px;
}
}
#Keyframes anime1 {
from {
left: 0;
}
to {
left: 400px;
}
}
<div id="first" onmouseenter="js1(this)"></div>
<div id="sec" onmouseenter="js2(this)"></div>
Fell free to use the code. Now You must only resolve the problem with scroll(the page must go left-I don't know how to do that but I'll try).
I used javascript and onmouseenter to create the hover part. You can read about onmouseenter here and about #Keyframes here.