With the addition of CSS3 transitions and keyframe animations it can be easy to overdo animations on your website. However, adding certain effects to main content areas can greatly enhance the experience your visitors receive.
A popular trend on the web these days are "content boxes". These were first found on a lot of sports and news sites mainly, but have since made their way to every category of web pages. Plain, generic content boxes are effective in dividing areas of content, but can be boring if there is nothing present to visually please the user.
So lets spice those generic boxes up a little bit and add some color and unique hover animations! In this particular example we are going to be mimicking the effect found on POP's website.
Framework
Let's get started and lay some framework for the boxes themselves in plain HTML. We need to create each "box":
[code] <a class="box" href="#"> </a>
Breaking news - hippos are sorta dangerous
Tonight at nine
As for the CSS styling for these, we just need something very generic. It's the hover effects that we are looking to add a "pop". So initially we only need to apply the following:
[code] background: linear-gradient( white, white 50%, black 50%, black ); [/code]
We need to make the background-size twice as tall as the element itself so on hover its just a matter of moving it up and there is no extra processes trying to load upon hover:
[code] background-size: 100% 200%; [/code]
Here is an image from CSS-Tricks showing what is going to be happening on hover:
We actually need to make the background a tad bit taller than 200%, or else a slight bit of it will still be exposed on the element pre-hover.
Quick Recap
Here is the full CSS we have so far as well as the transition on hover:
[code] .box { background: linear-gradient( white, white 50%, #333 50%, #333 ); transition: all 0.2s ease; } .box:hover { background-position: 100% 100%; } [/code] Spruce-it-up
Now we need to change some font colors on the hover action:
[code] .box:hover h2 { color: #48ad26; } .box:hover h2 span { color: white; } .box:hover h3 { color: #999; } [/code] Actually Animating
Now for the real fun, adding in the keyframe animations. To correctly emulate the effect on the POP website we need to have a different animation for the hover-on and hover-off states to add the "bump" effect so each happens in different directions. We could do this via transitions to some extent but the fact the text moves a bit and then returns to it's original states means we need to use keyframe animations to correctly emulate the effect shown on the POP website.
Side Note: I will be going over Keyframe Animations more in depth in a later tutorial
[code] .box @keyframes up-bump { 0% { padding-top: 2em; } 50% { padding-top: 1.5em; } 100% { padding-top: 2em; } } @keyframes down-bump { 0% { padding-top: 2em; } 50% { padding-top: 2.5em; } 100% { padding-top: 2em; } } [/code]
[code] .box { animation: down-bump 0.4s ease; } .box:hover { animation: up-bump 0.4s ease; } [/code]
Initial Bump Fix
Adding that animation on the initial state makes it run right away on page load. Could be a neat effect, could be annoying. To solve this i added a little JS as shown below in the CodePen Example.
See the Pen jvwLr by Kevin Carpenter (@KevinCarpenter) on CodePen