Last update: April 20, 2020

Animate the Icon Box element

Oxygen Icon Box

Drag a button, link, or anything else into the icon box to place it below the text. Lorem ipsum dolor sit amet elit.

Oxygen Icon Box

Drag a button, link, or anything else into the icon box to place it below the text. Lorem ipsum dolor sit amet elit.

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:

Oxygen Icon Box

Drag a button, link, or anything else into the icon box to place it below the text. Lorem ipsum dolor sit amet elit.

.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)
}

Oxygen Icon Box

Drag a button, link, or anything else into the icon box to place it below the text. Lorem ipsum dolor sit amet elit.

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:

Oxygen Icon Box

Drag a button, link, or anything else into the icon box to place it below the text. Lorem ipsum dolor sit amet elit.

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:

Oxygen Icon Box

Drag a button, link, or anything else into the icon box to place it below the text. Lorem ipsum dolor sit amet elit.

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
}

Oxygen Icon Box

Drag a button, link, or anything else into the icon box to place it below the text. Lorem ipsum dolor sit amet elit.

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:

Supa Icon-Box 2

Efficiently brand an expanded array of niches vis-a-vis leading-edge metrics. Credibly re-engineer focused collaboration.

Supa Icon-Box 2

Professionally benchmark cross-unit best practices before an expanded array of core competencies. Authoritatively repurpose resource sucking solutions after backend benefits. Distinctively plagiarize intuitive.

Supa Icon-Box 2

Monotonectally brand ethical web services through unique vortals. Compellingly syndicate.

Supa Icon-Box 3

Interactively synergize frictionless metrics via professional architectures. Distinctively re-engineer.

Supa Icon-Box 3

Quickly simplify integrated web services before installed base e-services. Continually underwhelm technically.

Supa Icon-Box 3

Appropriately coordinate alternative catalysts for change for resource-leveling data.

Supa Icon-Box 4

Intrinsicly envisioneer enterprise-wide models through backward-compatible vortals. Completely customize optimal potentialities after.

Supa Icon-Box 4

Rapidiously simplify cross-media e-business after cross-media partnerships. Compellingly disintermediate virtual data via high-quality e-commerce. Proactively formulate bleeding-edge outsourcing without.

heartclosealign-justifyinfo-circlebanfirechevron-downcaret-upcirclepuzzle-piecequestion-circle-omagic-wandrocket