CSS Slide effect into container - html

Question

I'd like to get this effect:
But I cant move only the content, leaving fixed the container. If you see my fiddle, I'm moving all together, the content and the container.
And even I'd like to put the hover on the circle div, not in the content like it is right now, because now when the animation ends it losing the hover.
A little detail to keep in mind:
I need to update at runtime the text to display due it should be
translated depending on the language selected by the user.
Here is my fiddle
.frame {
display: flex;
background-color: green;
height: 200px;
width: 200px;
flex-direction: center;
justify-content: center;
align-items: center;
}
.oval {
display: flex;
background-color: white;
border-radius: 50px;
width: 100px;
height: 100px;
}
.box {
display: flex;
flex-direction: column;
background-color: gray;
height: 100px;
width: 100px;
position: relative;
top: 25px;
transition: top 200ms ease-in;
border-radius: 50px;
}
.box:hover {
top: -50px;
transition: top 200ms ease-in;
animation: ticker 25s cubic-bezier(1, 0, .5, 0);
}
#keyframes ticker {
0% {
margin-top: 0
}
25% {
margin-top: -30px
}
50% {
margin-top: -60px
}
75% {
margin-top: -90px
}
100% {
margin-top: 0
}
}
.box-inn {
flex: 1;
margin: 5%;
color: white;
text-align: center;
align-items: center;
}
.first {
background-color: blue;
}
.second {
background-color: red;
}
<div class="frame">
<div class="oval">
<div class="box">
<div class="box-inn first">
Text 1
</div>
<div class="box-inn second">
Text 2
</div>
</div>
</div>
</div>

Answer 1

You can use pseudo-elements. First hide :after with transform: translateY(100%) and overflow: hidden on parent, and on hover you translate :before for 100% and move :after to 0.
.elem {
position: relative;
width: 100px;
height: 100px;
border: 1px solid white;
color: white;
border-radius: 50%;
background: #4CA5D0;
overflow: hidden;
}
.elem:after,
.elem:before {
content: 'Top';
position: absolute;
transition: all 0.3s ease-in;
top: 0;
left: 0;
height: 100%;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.elem:after {
content: 'Bottom';
transform: translateY(100%);
}
.elem:hover:before {
transform: translateY(-100%);
}
.elem:hover:after {
transform: translateY(0);
}
<div class="elem"></div>
If you don't want to use pseudo-elements Fiddle

Answer 2

If your icons are images you may want a non-pseudo element method. Here's an example using a font awesome icon to illustrate an image (fa icons can be used with pseudo elements, however)
.link {
position: relative; /* for absolute positioned children to work */
display: inline-flex;
flex-direction: column;
height: 100px; /* this method uses absolutely position chldren so..*/
width: 100px; /* ..a fixed width and height was needed */
color: white;
border-radius: 100%;
border-color: white;
border-style: solid;
border-width: 2px;
overflow: hidden; /* hides the overflowing elements */
}
.icon {
position: absolute;
top: 50%; /* vertically position icon in center in combination with transform -50% */
left: 50%; /* same deal with horizontal centering */
transform: translate(-50%, -50%); /* horizontal, vertical */
transition: all 0.2s ease;
}
.text {
position: absolute;
top: 150%; /* positions text under the .link container element */
left: 50%;
transform: translate(-50%, -50%);
transition: all 0.2s ease;
}
.link:hover .icon {
top: -50%; /* positions icon above the .link container element */
}
.link:hover .text {
top: 50%; /* moves text into center of .link container element */
}
/* styling - ignore */
body {display: flex;justify-content: center;align-items: center; height: 100vh;margin: 0;font-size: 24px;background-color: hsl(189, 72%, 45%);font-variant: small-caps;font-family: verdana;}.icon i {font-size: 40px;}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"/>
<a class="link" href="https://jsfiddle.net/Hastig/4akmbgc1/">
<div class="icon"><i class="fa fa-home"></i></div>
<div class="text">fiddle</div>
</a>
fiddle
https://jsfiddle.net/Hastig/4akmbgc1/

Answer 3

Following #Nenad Vracar answer:
On:
I need to update at runtime the text to display due it should be
translated depending on the language selected by the user.
You can use data-attributes along with the attr() CSS function in the pseudo-elements' content property.
Note: Change these data-attributes with JS in your language handling logic.
.elem {
position: relative;
width: 100px;
height: 100px;
border: 1px solid white;
color: white;
border-radius: 50%;
background: #4CA5D0;
overflow: hidden;
}
.elem:after,
.elem:before {
content: attr(data-top-text);
position: absolute;
transition: all 0.3s ease-in;
top: 0;
left: 0;
height: 100%;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.elem:after {
content: attr(data-bottom-text);
transform: translateY(100%);
}
.elem:hover:before {
transform: translateY(-100%);
}
.elem:hover:after {
transform: translateY(0);
}
<div class="elem" data-top-text="top_text" data-bottom-text="bottom_text"></div>
Another alternative is to use the :lang pseudo-class.
Using lang attribute in the element.
.elem {
position: relative;
width: 100px;
height: 100px;
border: 1px solid white;
color: white;
border-radius: 50%;
background: #4CA5D0;
overflow: hidden;
}
.elem:after,
.elem:before {
content: "top_text";
position: absolute;
transition: all 0.3s ease-in;
top: 0;
left: 0;
height: 100%;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.elem:after {
content: "bottom_text";
transform: translateY(100%);
}
.elem:hover:before {
transform: translateY(-100%);
}
.elem:hover:after {
transform: translateY(0);
}
.elem:lang(es):before {
content: "texto_superior";
}
.elem:lang(es):after {
content: "texto_inferior";
}
<div class="elem"></div>
<div class="elem" lang="es"></div>
Changing the html lang attribute:
document.getElementById('change-lang').addEventListener('click', function() {
document.documentElement.setAttribute('lang', 'es');
});
.elem {
position: relative;
width: 100px;
height: 100px;
border: 1px solid white;
color: white;
border-radius: 50%;
background: #4CA5D0;
overflow: hidden;
}
.elem:after,
.elem:before {
content: "top_text";
position: absolute;
transition: all 0.3s ease-in;
top: 0;
left: 0;
height: 100%;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.elem:after {
content: "bottom_text";
transform: translateY(100%);
}
.elem:hover:before {
transform: translateY(-100%);
}
.elem:hover:after {
transform: translateY(0);
}
:lang(es) .elem:before {
content: "texto_superior";
}
:lang(es) .elem:after {
content: "texto_inferior";
}
<div class="elem"></div>
<button id="change-lang">Cambiar a Español</button>