eyJzb3VyY2UiOiJodHRwczovL294eWdlbjRmdW4uc3VwYWRlemlnbi5jb20iLCJjb21wb25lbnQiOnsiaWQiOjIsIm5hbWUiOiJjdF9zZWN0aW9uIiwib3B0aW9ucyI6eyJjdF9pZCI6MiwiY3RfcGFyZW50IjoxMDAwMDUsInNlbGVjdG9yIjoic2VjdGlvbi0yLTk2MSIsIm9yaWdpbmFsIjp7Imdsb2JhbENvbmRpdGlvbnNSZXN1bHQiOnRydWUsImZsZXgtZGlyZWN0aW9uIjoicm93IiwiZGlzcGxheSI6ImZsZXgiLCJqdXN0aWZ5LWNvbnRlbnQiOiJmbGV4LXN0YXJ0IiwidGV4dC1hbGlnbiI6ImxlZnQiLCJzZWN0aW9uLXdpZHRoIjoiZnVsbC13aWR0aCJ9LCJhY3RpdmVzZWxlY3RvciI6ZmFsc2UsIm1lZGlhIjp7InRhYmxldCI6eyJvcmlnaW5hbCI6eyJkaXNwbGF5IjoiZmxleCIsImZsZXgtZGlyZWN0aW9uIjoiY29sdW1uIiwiYWxpZ24taXRlbXMiOiJjZW50ZXIiLCJ0ZXh0LWFsaWduIjoiY2VudGVyIn19fX0sImNoaWxkcmVuIjpbeyJpZCI6MywibmFtZSI6Im94eV9pY29uX2JveCIsIm9wdGlvbnMiOnsiY3RfaWQiOjMsImN0X3BhcmVudCI6Miwic2VsZWN0b3IiOiJfaWNvbl9ib3gtMy05NjEiLCJvcmlnaW5hbCI6eyJnbG9iYWxDb25kaXRpb25zUmVzdWx0Ijp0cnVlfSwiY2xhc3NlcyI6WyJpY29ib3gxIl0sImFjdGl2ZXNlbGVjdG9yIjoiaWNvYm94MSJ9LCJjaGlsZHJlbiI6W3siaWQiOjQsIm5hbWUiOiJjdF9mYW5jeV9pY29uIiwib3B0aW9ucyI6eyJjdF9pZCI6NCwiY3RfcGFyZW50IjozLCJzZWxlY3RvciI6ImZhbmN5X2ljb24tNC05NjEiLCJvcmlnaW5hbCI6eyJpY29uLWlkIjoiTGluZWFyaWNvbnNpY29uLXJvY2tldCIsImdsb2JhbENvbmRpdGlvbnNSZXN1bHQiOnRydWV9LCJveHlfYnVpbHRpbiI6InRydWUiLCJjdF9jb250ZW50IjoiIn0sImRlcHRoIjo0fV0sImRlcHRoIjo0fSx7ImlkIjo2LCJuYW1lIjoib3h5X2ljb25fYm94Iiwib3B0aW9ucyI6eyJjdF9pZCI6NiwiY3RfcGFyZW50IjoyLCJzZWxlY3RvciI6Il9pY29uX2JveC02LTk2MSIsIm9yaWdpbmFsIjp7Imdsb2JhbENvbmRpdGlvbnNSZXN1bHQiOnRydWUsIndpZHRoLXVuaXQiOiJweCIsImljb25fYm94X3RleHQiOiJEcmFnIGEgYnV0dG9uLCBsaW5rLCBvciBhbnl0aGluZyBlbHNlIGludG8gdGhlIGljb24gYm94IHRvIHBsYWNlIGl0IGJlbG93IHRoZSB0ZXh0LiBMb3JlbSBpcHN1bSBkb2xvciBzaXQgYW1ldCBlbGl0LiIsImJhY2tncm91bmQtY29sb3IiOiJjb2xvcigxKSIsImljb25fYm94X2hlYWRpbmciOiJPeHlnZW4gSWNvbiBCb3giLCJpY29uX2JveF9oZWFkaW5nX3R5cG9ncmFwaHlfY29sb3IiOiIjMDAwMDAwIn0sImFjdGl2ZXNlbGVjdG9yIjoiaWNvYm94MSIsImNsYXNzZXMiOlsiaWNvYm94MSJdfSwiY2hpbGRyZW4iOlt7ImlkIjo3LCJuYW1lIjoiY3RfZmFuY3lfaWNvbiIsIm9wdGlvbnMiOnsiY3RfaWQiOjcsImN0X3BhcmVudCI6Niwic2VsZWN0b3IiOiJmYW5jeV9pY29uLTctOTYxIiwib3JpZ2luYWwiOnsiaWNvbi1pZCI6IkxpbmVhcmljb25zaWNvbi1tYWdpYy13YW5kIiwiZ2xvYmFsQ29uZGl0aW9uc1Jlc3VsdCI6dHJ1ZX0sIm94eV9idWlsdGluIjoidHJ1ZSIsImN0X2NvbnRlbnQiOiIifSwiZGVwdGgiOjR9XSwiZGVwdGgiOjR9LHsiaWQiOjExMiwibmFtZSI6ImN0X2NvZGVfYmxvY2siLCJvcHRpb25zIjp7ImN0X2lkIjoxMTIsImN0X3BhcmVudCI6Miwic2VsZWN0b3IiOiJjb2RlX2Jsb2NrLTExMi05NjEiLCJvcmlnaW5hbCI6eyJnbG9iYWxDb25kaXRpb25zUmVzdWx0Ijp0cnVlLCJjb2RlLXBocCI6IiIsImZsZXgtZGlyZWN0aW9uIjoidW5zZXQiLCJkaXNwbGF5Ijoibm9uZSIsImNvZGUtY3NzIjoiLmljb2JveDEgIHtcbiAgICBjdXJzb3I6IHBvaW50ZXI7XG4gIFx0b3ZlcmZsb3c6aGlkZGVuXG59XG5cbi5pY29ib3gxIC5veHktaWNvbi1ib3gtdGV4dCB7XG4gICAgdHJhbnNpdGlvbjowLjVzIGVhc2UgdHJhbnNmb3JtO1xuICAgIHRyYW5zZm9ybTogdHJhbnNsYXRleSgyMDAlKVxufVxuXG4uaWNvYm94MTpob3ZlciAub3h5LWljb24tYm94LXRleHQge1xuICAgIHRyYW5zZm9ybTogdHJhbnNsYXRleSgwKVxufVxuXG4uaWNvYm94MSAub3h5LWljb24tYm94LWljb24ge1xuICAgIHRyYW5zaXRpb246MC41cyBlYXNlIGFsbDtcbiAgICB0cmFuc2Zvcm06IHRyYW5zbGF0ZXkoNTBweClcbn1cblxuLmljb2JveDE6aG92ZXIgLm94eS1pY29uLWJveC1pY29uIHtcbiAgICB0cmFuc2Zvcm06IHRyYW5zbGF0ZXkoMjBweCk7XG4gICAgb3BhY2l0eTouNVxufVxuXG4uaWNvYm94MSAub3h5LWljb24tYm94LWhlYWRpbmcge1xuICAgIHRyYW5zaXRpb246MC41cyBlYXNlIG9wYWNpdHk7XG4gICAgdHJhbnNmb3JtOiB0cmFuc2xhdGV5KDUwcHgpXG59XG5cbi5pY29ib3gxOmhvdmVyIC5veHktaWNvbi1ib3gtaGVhZGluZ3tcbiAgICBvcGFjaXR5OjAhaW1wb3J0YW50XG59XG4ifSwiYWN0aXZlc2VsZWN0b3IiOmZhbHNlLCJjdF9jb250ZW50IjoiIn0sImRlcHRoIjo0fV0sImRlcHRoIjo2fSwiY2xhc3NlcyI6eyJpY29ib3gxIjp7ImtleSI6Imljb2JveDEiLCJtZWRpYSI6eyJ0YWJsZXQiOnsib3JpZ2luYWwiOnsibWFyZ2luLWJvdHRvbSI6IjEwIn19fSwib3JpZ2luYWwiOnsiaWNvbl9ib3hfY29udGVudF9hbGlnbm1lbnQiOiJjZW50ZXIiLCJiYWNrZ3JvdW5kLWNvbG9yIjoiIzAwMDAwMCIsInBhZGRpbmctdG9wIjoiMTAiLCJwYWRkaW5nLWxlZnQiOiI0MCIsInBhZGRpbmctcmlnaHQiOiI0MCIsInBhZGRpbmctYm90dG9tIjoiMTAiLCJvdmVyZmxvdyI6ImhpZGRlbiIsIm1heC13aWR0aCI6IjQwMCIsIndpZHRoLXVuaXQiOiIlIiwid2lkdGgiOiIxMDAiLCJtYXJnaW4tcmlnaHQiOiIyMCJ9fX0sImNvbG9ycyI6eyIxIjp7ImlkIjoxLCJuYW1lIjoic3VwYXJlZCIsInZhbHVlIjoiI2ZmNTI1MiJ9fX0=
In this tutorial, I use the Icon Box element because the structure is already in place but you can do exactly the same kind of effect with your own box.
To understand how it works, let's study it first.
Add an Icon box element (keep the default settings) and in the frontend, open the devtools (F12) :
Here is a simplified version, with all the classes (it's just what we need) :
The classes names are pretty self-explanatory. There is one class for the icon, one for the heading, and one for the text.
(Note that there is also a class for the link, but to make it simpler, we can skip it for the moment).
So now that we have a clear view of the full structure with the classes, we can easily animate these elements with some basic CSS.
Step 1
Add a class to the Icon Box element : .icobox1
Step 2
For the settings, it's just very basic for the moment.
Step 3
Let's start with the custom CSS.
.oxy-icon-box-text
Let's move the text out of the box with a translateY.
.icobox1 .oxy-icon-box-text {
transform: translatey(150%)
}Here is how it looks like:
.oxy-icon-box-icon & .oxy-icon-box-heading
Let's move the icon and the title somewhere in the middle. Still with some TranslateY.
.icobox1 .oxy-icon-box-icon {
transform: translatey(50px)
}
.icobox1 .oxy-icon-box-heading {
transform: translatey(50px)
}Step 4
Now we can work on the transitions.
Animate the text
We have to add the transition CSS property.
What we are doing here, is to change the position of the text, then move it back when the box is on hover.
.icobox1 .oxy-icon-box-text {
transition: 0.5s ease transform;
transform: translatey(150%)
}
.icobox1:hover .oxy-icon-box-text {
transform: translatey(0)
}Move your mouse over the box:
Animate the icon and the title
Just like for the text, we must add a transition.
This time we also change the opacity of the icon, so we need to apply the transition to 'all'.
.icobox1 .oxy-icon-box-icon {
transition: 0.5s ease all;
transform: translatey(50px)
}
.icobox1:hover .oxy-icon-box-icon {
transform: translatey(20px);
opacity: .5
}And finally for the title, we only change the opacity.
.icobox1 .oxy-icon-box-heading {
transition: 0.5s ease opacity;
transform: translatey(50px)
}
.icobox1:hover .oxy-icon-box-heading {
opacity: 0!important
}All our elements are animated now:
Let's wrap this up and add the finish touch.
We change the mouse pointer and we hide everything outside the Icon Box:
.icobox1 {
cursor: pointer;
overflow: hidden
}The full CSS:
.icobox1 {
cursor: pointer;
overflow: hidden
}
.icobox1 .oxy-icon-box-text {
transition: 0.5s ease transform;
transform: translatey(200%)
}
.icobox1:hover .oxy-icon-box-text {
transform: translatey(0)
}
.icobox1 .oxy-icon-box-icon {
transition: 0.5s ease all;
transform: translatey(50px)
}
.icobox1:hover .oxy-icon-box-icon {
transform: translatey(20px);
opacity: .5
}
.icobox1 .oxy-icon-box-heading {
transition: 0.5s ease opacity;
transform: translatey(50px)
}
.icobox1:hover .oxy-icon-box-heading {
opacity: 0!important
}Some tips about the alignments for the Icon Box
And if you have some trouble to make your own, you can also check my design set Unlimited Elements.
Here are some elements from that set: