{"id":20941,"date":"2013-04-03T07:59:31","date_gmt":"2013-04-03T14:59:31","guid":{"rendered":"http:\/\/css-tricks.com\/?p=20941"},"modified":"2013-04-03T07:59:31","modified_gmt":"2013-04-03T14:59:31","slug":"pop-hovers","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/pop-hovers\/","title":{"rendered":"Pop Hovers"},"content":{"rendered":"

POP<\/a> 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<\/em> a little. I thought I’d try and replicate it because, you know, eff yeah hovers<\/a>.<\/p>\n

Demo<\/h3>\n
<\/code>Check out this Pen!<\/a><\/pre>\n
HTML<\/h3>\n
Each area is a “box”:<\/p>\n
<a href=\"#\" class=\"box\">\r\n  <h2><span>Breaking news -<\/span> hippos are sorta dangerous<\/h2>\r\n  <h3>Tonight at nine<\/h3>\r\n<\/a><\/code><\/pre>\n
CSS (backgrounds)<\/h3>\n
The styling of the default box is trivial. The hovers are the interesting part. POP does the background slide by using an actual element they animate the position of. If we’re OK with this feature only working on browser that support gradients, we can ditch that element and just animate the background-position.<\/p>\n
A top-half-white and bottom-half-black background is easy:<\/p>\n
background: linear-gradient(\r\n   white, white 50%, black 50%, black\r\n);<\/code><\/pre>\n
Then we make it twice as tall as the element itself:<\/p>\n
background-size: 100% 200%;<\/code><\/pre>\n
Like this:<\/p>\n
<\/figure>\n
In reality, we’ll make the background a little bit taller than 200%, because right at 200% it was exposing a little bit of background into the element still (in Chrome).<\/p>\n
.box {\r\n  background: linear-gradient(\r\n     white, white 50%, #333 50%, #333\r\n  );\r\n  transition: all 0.2s ease;\r\n}\r\n.box:hover {\r\n  background-position: 100% 100%;\r\n}<\/code><\/pre>\n
CSS (colors)<\/h3>\n
The default text color is black, so no CSS needed at all there. On hover, we adjust the colors. The span changing is just a fun surprise and brings more pop to the party.<\/p>\n
.box:hover h2 {\r\n  color: #48ad26;\r\n}\r\n.box:hover h2 span {\r\n  color: white;\r\n}\r\n.box:hover h3 {\r\n  color: #999;\r\n}<\/code><\/pre>\n
CSS (bumping)<\/h3>\n
The tricky bit here is that the “bump” happens in different directions<\/em> depending on if it’s a hover-on or hover-off. The fact that the text moves a bit and then back to it’s original position means a transition<\/a> won’t help us here either, this is animation<\/a> territory. We’ll make one @keyframes for the up-bump and another for the down bump. Just a bit of padding will help us, because our box-sizing<\/a> choice keeps the height of each box the same. <\/p>\n
@keyframes up-bump {\r\n  0% { padding-top: 2em; }\r\n  50% { padding-top: 1.5em; }\r\n  100% { padding-top: 2em; }\r\n}\r\n@keyframes down-bump {\r\n  0% { padding-top: 2em; }\r\n  50% { padding-top: 2.5em; }\r\n  100% { padding-top: 2em; }\r\n}<\/code><\/pre>\n
By default (triggers on hover-off) the .box<\/code> will get the down bump and the :hover<\/code> will get the up bump. This matches the direction of the background sliding in and out.<\/p>\n
.box {\r\n  animation: down-bump 0.4s ease;\r\n}\r\n.box:hover {\r\n  animation: up-bump 0.4s ease;\r\n}<\/code><\/pre>\n
Initial bump fix<\/h3>\n
Adding that animation on the initial state makes it run right away on page load. Could be a neat effect, could be annoying. The POP site doesn’t run them on load. Matt Boldt had the good idea of adding the out-bump when the hover out occurs only (via a class) so it won’t run at first.<\/p>\n
<\/code>Check out this Pen!<\/a><\/pre>\n
On no-hover devices…<\/h3>\n
They are links and no vital content is hidden, so no big deal.<\/p>\n","protected":false},"excerpt":{"rendered":"
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 […]<\/p>\n","protected":false},"author":3,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":"","jetpack_publicize_message":"","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":[]},"categories":[4],"tags":[],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"","jetpack-related-posts":[{"id":20295,"url":"https:\/\/css-tricks.com\/uniqlo-stripe-hovers\/","url_meta":{"origin":20941,"position":0},"title":"Uniqlo Stripe Hovers","date":"February 27, 2013","format":false,"excerpt":"For the larger promotional boxes in the design of Uniqlo.com, they use animated stripes that reveal on hover. It's kind of awesome, if you ask me. Perhaps because they wanted to share the awesome with as many different browsers as possible, they used an animated GIF to produce the effect.\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":21913,"url":"https:\/\/css-tricks.com\/pizza-time-hovers\/","url_meta":{"origin":20941,"position":1},"title":"Pizza Time Hovers","date":"June 10, 2013","format":false,"excerpt":"Hover Maester Jenn Lukas sent me a link to PizzaTime.com. We agreed that 1) those are some pretty neat hovers! and 2) it's pretty cool that there is a quality website at all at a domain like PizzaTime.com - in which that she typed in randomly hoping there would be.\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":157373,"url":"https:\/\/css-tricks.com\/turn-hovers-scroll\/","url_meta":{"origin":20941,"position":2},"title":"Turn Off Hovers on Scroll","date":"November 29, 2013","format":false,"excerpt":"Sometimes hover effects can cause redraws and repaints and whatnot that take time and reduce performance. As you scroll down a page, you're likely inadvertently triggering hover events that have no meaning while you scroll. Turning them off (via CSS's pointer-events) is a clever way to reclaim some scrolling performance.","rel":"","context":"In "Link"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":287092,"url":"https:\/\/css-tricks.com\/change-color-of-svg-on-hover\/","url_meta":{"origin":20941,"position":3},"title":"Change Color of SVG on Hover","date":"May 13, 2019","format":false,"excerpt":"There are a lot of different ways to use SVG. Depending on which way, the tactic for recoloring that SVG in different states or conditions \u2014 :hover, :active, :focus, class name change, etc. \u2014 is different. Let's look at the ways. Inline SVG Inline SVG is my favorite way to\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/05\/avg-hover-color.gif?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":365738,"url":"https:\/\/css-tricks.com\/cool-hover-effects-that-use-css-text-shadow\/","url_meta":{"origin":20941,"position":4},"title":"Cool Hover Effects That Use CSS Text Shadow","date":"May 13, 2022","format":false,"excerpt":"In my last article we saw how CSS background properties allow us to create cool hover effects. This time, we will focus on the CSS text-shadow property to explore even more interesting hovers. You are probably wondering how adding shadow to text can possibly give us a cool effect, but\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/05\/text-shadow.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":363124,"url":"https:\/\/css-tricks.com\/css-link-hover-effects\/","url_meta":{"origin":20941,"position":5},"title":"6 Creative Ideas for CSS Link Hover Effects","date":"February 15, 2022","format":false,"excerpt":"Creating CSS link hover effects can add a bit of flair to an otherwise bland webpage. If you\u2019ve ever found yourself stumped trying to make a slick hover effect, then I have six CSS effects for you to take and use for your next project. Let\u2019s get right to it!\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/07\/link-pattern.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]}],"featured_media_src_url":null,"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/20941"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=20941"}],"version-history":[{"count":4,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/20941\/revisions"}],"predecessor-version":[{"id":20997,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/20941\/revisions\/20997"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=20941"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=20941"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=20941"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}