{"id":305681,"date":"2020-04-07T07:51:52","date_gmt":"2020-04-07T14:51:52","guid":{"rendered":"https:\/\/css-tricks.com\/?p=305681"},"modified":"2020-04-07T07:51:53","modified_gmt":"2020-04-07T14:51:53","slug":"how-to-re-create-a-nifty-netflix-animation-in-css","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/how-to-re-create-a-nifty-netflix-animation-in-css\/","title":{"rendered":"How to Re-Create a Nifty Netflix Animation in CSS"},"content":{"rendered":"\n<p>The design for Netflix&#8217;s browse page has remained pretty similar for a few years now. One mainstay component is the preview slider that allows users to scroll through content and hover on items to see a preview.<\/p>\n\n\n\n<p>One unique characteristic of the UI is its hover behavior. When a show preview expands on hover, the cards next to it are pushed outward so that they don\u2019t overlap.&nbsp;<\/p>\n\n\n\n<!--more-->\n\n\n\n<p>Like this:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"480\" height=\"188\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/03\/Oi8Y_TWA.gif?resize=480%2C188&#038;ssl=1\" alt=\"\" class=\"wp-image-305682\" data-recalc-dims=\"1\"\/><figcaption>It\u2019s like Bill Murray and Brad Pitt are fighting for the spotlight.<\/figcaption><\/figure>\n\n\n\n<p>We can do this in CSS! No JavaScript. No dependencies. Plain CSS. But before getting into any code, here\u2019s exactly what we want to do:<\/p>\n\n\n\n<ol><li>The card that is hovered over should expand while keeping its aspect ratio.<\/li><li>When a card is hovered, the other cards should not change size and move outwards so that they don&#8217;t overlap one another.<\/li><li>All the cards should remain vertically centered with one another.<\/li><\/ol>\n\n\n\n<p>Sound good? Now let\u2019s get into the code.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"html-and-flexible-elements\">HTML and flexible elements<\/h3>\n\n\n<p>Let\u2019s set up a row of images that represents Netflix\u2019s video previews. That includes:<\/p>\n\n\n\n<ul><li>A &nbsp;<code>.container<\/code>&nbsp;parent element with several <code>.item<\/code> elements inside<\/li><li>Each <code>.item<\/code> element consisting of an image wrapped in an anchor tag<\/li><li>Turning <code>.container<\/code> into a flex container that aligns the items in a row<\/li><li>Setting the flex behavior for the <code>.item<\/code> class so they take up equal space in the row<\/li><\/ul>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_eYNMawe\" src=\"\/\/codepen.io\/anon\/embed\/eYNMawe?height=350&amp;theme-id=1&amp;slug-hash=eYNMawe&amp;default-tab=result\" height=\"350\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed eYNMawe\" title=\"CodePen Embed eYNMawe\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n<h3 class=\"wp-block-heading\" id=\"expanding-an-item-on-hover\">Expanding an item on hover<\/h3>\n\n\n<p>Our next step is getting an item to expand when it is hovered. We could do this by animating the element\u2019s <code>width<\/code>, but that would affect the flow of the document and cause the hovered item\u2019s siblings to shrink \u2013 plus, animating the <code>width<\/code> property is known to be <a href=\"https:\/\/developers.google.com\/web\/fundamentals\/design-and-ux\/animations\/animations-and-performance\" rel=\"noopener\">poor for performance<\/a> in some cases.<\/p>\n\n\n\n<p>To avoid squeezing the sibling of the hovered item, we are going to animate the <code>transform<\/code> property \u2014 specifically, its <code>scale()<\/code> function \u2014 instead. This won\u2019t affect document flow the same way <code>width<\/code> does.<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_LYVdooX\" src=\"\/\/codepen.io\/anon\/embed\/LYVdooX?height=350&amp;theme-id=1&amp;slug-hash=LYVdooX&amp;default-tab=result\" height=\"350\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed LYVdooX\" title=\"CodePen Embed LYVdooX\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n<h3 class=\"wp-block-heading\" id=\"moving-siblings-outward\">Moving siblings outward<\/h3>\n\n\n<p>Getting the siblings of a hovered item to move away from the hovered item is the tricky part of this whole thing. One CSS feature we have at our disposal is the <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/General_sibling_combinator\" rel=\"noopener\">general sibling combinator<\/a>. This lets us select all of the sibling items that are positioned <em>after<\/em> the hovered item.<\/p>\n\n\n\n<p>We\u2019ll turn to the <code>transform<\/code>&nbsp;property\u2019s <code>translateX()<\/code>&nbsp;function to move things around. Again, animating <code>transform<\/code> is much nicer than other properties that impact document flow, like margins and padding.<\/p>\n\n\n\n<p>Since we\u2019ve set an item to scale up 150% on hover, the translation should be set to 25%. That\u2019s half of the additional space that is being occupied by the hovered item.<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">.item:hover ~ .item {\n\u00a0 transform: translateX(25%);\n}<\/code><\/pre>\n\n\n\n<p>That handles moving things to the right, but how can we translate the items on the <em>left<\/em>? Since the general sibling combinator only applies to siblings positioned <em>after<\/em> a given selector (no going \u201cbackwards\u201d), we\u2019ll need another approach.<\/p>\n\n\n\n<p>One way is to add an additional hover rule on the parent container itself. Here is the plan:<\/p>\n\n\n\n<ul><li>When hovering the parent container, shift all the items inside that container to the left.<\/li><li>Use the general sibling combinator to make the items positioned after the hovered item move to the right.<\/li><li>Get super specific so a hovered item isn\u2019t translated like the rest of the items.<\/li><\/ul>\n\n\n\n<p>We\u2019re making a big assumption that your document uses a left-to-right writing mode. If you want to use this effect in a right-to-left context, you will need to set all items inside the hovered outer container to move <em>right<\/em> and use the general sibling combinator to move all selected items <em>left<\/em>.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"demo-time\">Demo time!<\/h3>\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_RwPjBag\" src=\"\/\/codepen.io\/anon\/embed\/RwPjBag?height=350&amp;theme-id=1&amp;slug-hash=RwPjBag&amp;default-tab=result\" height=\"350\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed RwPjBag\" title=\"CodePen Embed RwPjBag\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>One little thing to note: this final version is using <code>:focus<\/code> and <code>:focus-within<\/code> pseudo-classes to support keyboard navigation. The Netflix example isn\u2019t using it, but I think that\u2019s a nice touch for accessibility.<\/p>\n\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n\n<p>There we have it! Yes, we could have used JavaScript event listeners instead of CSS hover rules., and that could possibly be better for maintainability and readability. But it\u2019s sometimes fun to see just how far CSS can take us!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>The design for Netflix&#8217;s browse page has remained pretty similar for a few years now. One mainstay component is the preview slider that allows users to scroll through content and hover on items to see a preview. One unique characteristic of the UI is its hover behavior. When a show preview expands on hover, the [&hellip;]<\/p>\n","protected":false},"author":269581,"featured_media":305684,"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":[708,1147],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/03\/netflix-carousel.png?fit=1200%2C600&ssl=1","jetpack-related-posts":[{"id":365738,"url":"https:\/\/css-tricks.com\/cool-hover-effects-that-use-css-text-shadow\/","url_meta":{"origin":305681,"position":0},"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 &quot;Article&quot;","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":365946,"url":"https:\/\/css-tricks.com\/css-hover-effects-background-masks-3d\/","url_meta":{"origin":305681,"position":1},"title":"Cool CSS Hover Effects That Use Background Clipping, Masks, and 3D","date":"May 26, 2022","format":false,"excerpt":"We\u2019ve walked through a series of posts now about interesting approaches to CSS hover effects. We started with a bunch of examples that use CSS background properties, then moved on to the text-shadow property where we technically didn\u2019t use any shadows. We also combined them with CSS variables and calc()\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/05\/Cool-hover-effects.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":336231,"url":"https:\/\/css-tricks.com\/long-hover\/","url_meta":{"origin":305681,"position":2},"title":"Long Hover","date":"March 16, 2021","format":false,"excerpt":"I had a very embarrassing CSS moment the other day. I was working on the front-end code of a design that had a narrow sidebar of icons. There isn't enough room there to show text of what the icons are, so the idea is that we'll use accessible (but visually\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/03\/long-hover-icon-tooltip-cursor.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":374302,"url":"https:\/\/css-tricks.com\/fancy-image-decorations-outlines-and-complex-animations\/","url_meta":{"origin":305681,"position":3},"title":"Fancy Image Decorations: Outlines and Complex Animations","date":"October 28, 2022","format":false,"excerpt":"We\u2019ve spent the last two articles in this three-part series playing with gradients to make really neat image decorations using nothing but the <img> element. In this third and final piece, we are going to explore more techniques using the CSS outline property. That might sound odd because we generally\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/10\/image-decorations-4.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":1357,"url":"https:\/\/css-tricks.com\/color-fading-menu-with-jquery\/","url_meta":{"origin":305681,"position":4},"title":"Color Fading Menu with jQuery","date":"November 12, 2008","format":false,"excerpt":"Editor's note: When I first pushed out this latest redesign for CSS-Tricks, it featured a simple color fading animation in the main navigation. Liam quickly noticed a flaw in the code I was using to do it, where if you very quickly moused back and forth over the menu items\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":304025,"url":"https:\/\/css-tricks.com\/4-ways-to-animate-the-color-of-a-text-link-on-hover\/","url_meta":{"origin":305681,"position":5},"title":"4 Ways to Animate the Color of a Text Link on Hover","date":"March 3, 2020","format":false,"excerpt":"Let\u2019s create a pure CSS effect that changes the color of a text link on hover\u2026 but slide that new color in instead of simply swapping colors. There are four different techniques we can use to do this. Let\u2019s look at those while being mindful of important things, like accessibility,\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]}],"featured_media_src_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/03\/netflix-carousel.png?fit=1024%2C512&ssl=1","_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/305681"}],"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\/269581"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=305681"}],"version-history":[{"count":6,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/305681\/revisions"}],"predecessor-version":[{"id":306456,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/305681\/revisions\/306456"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media\/305684"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=305681"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=305681"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=305681"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}