How to create cool hovers in the boxes

POP has these cool hovers in the boxes that make up their homepage. The boxes have a white background by default, and as you hover over them a dark background slides up behind, the text colors change, and the text “pops” up a little. When you hover off, the dark background slides away, the text colors change back, and the text pops down a little. I thought I’d try and replicate it because, you know, eff yeah hovers.

1. <h1>Hovers from <a target="_blank" href="http://www.popagency.com/">pop</a></h1>
3. <a href="#" class="box">
4. <h2><span>Breaking news -</span> hippos are sorta dangerous</h2>
5. <h3>Tonight at nine</h3>
6. </a>
7. <a href="#" class="box">
8. <h2><span>Lunch -</span> is delicious anytime</h2>
9. <h3>Even after dinner</h3>
10. </a>
11. <a href="#" class="box">
12. <h2><span>Wakka wakka -</span> ehhhhhh wakka wakka</h2>
13. <h3>honk honk</h3>
14. </a>
15. <a href="#" class="box">
16. <h2><span>Thin gray lines -</span> the new thick black lines</h2>
17. <h3>you heard it here</h3>
18. </a>

CSS

1. @import url(http://fonts.googleapis.com/css?family=Merriweather);
3. * {
4. box-sizing: border-box;
5. }
7. body {
8. font-family: 'Merriweather', serif;
9. padding: 20px;
10. }
12. a {
13. color: #f06d06;
14. text-decoration: none;
15. }
17. .box {
18. padding: 2em;
19. border: 1px solid #ccc;
20. display: block;
21. width: 50%;
22. height: 300px;
23. float: left;
24. margin: -1px 0 0 -1px;
25. color: black;
26. background: linear-gradient(
27. white, white 50%, #333 50%, #333
28. );
29. background-size: 100% 202%;
30. transition: all 0.2s ease;
31. animation: down-bump 0.4s ease;
32. }
33. .box h2 {
34. font-weight: 400;
35. letter-spacing: -1.5px;
36. line-height: 1.2;
37. }
38. .box h3 {
39. font: 0.8em "Lucida Grande", serif;
40. }
42. .box:hover {
43. background-position: 100% 100%;
44. animation: up-bump 0.4s ease;
45. }
46. .box:hover h2 {
47. color: #48ad26;
48. }
49. .box:hover h2 span {
50. color: white;
51. }
52. .box:hover h3 {
53. color: #999;
54. }
56. @keyframes up-bump {
57. 0% { padding-top: 2em; }
58. 50% { padding-top: 1.5em; }
59. 100% { padding-top: 2em; }
60. }
61. @keyframes down-bump {
62. 0% { padding-top: 2em; }
63. 50% { padding-top: 2.5em; }
64. 100% { padding-top: 2em; }
65. }

JS

1. $(function(){
2. $(".box").mouseout(function(){
3. $(this).addClass("bump-down");
4. });
5. });

On no-hover devices…

They are links and no vital content is hidden, so no big deal.