CINXE.COM

<!DOCTYPE html><html data-app-version="-production" lang="en"><head><link rel="preload" href="https://static.tutsplus.com/packs/static/fonts/fa-solid-900-130191cbdfe1d7a5dde9.woff2" as="font" type="font/woff2" crossorigin="anonymous"><link rel="preload" href="https://static.tutsplus.com/packs/static/fonts/fa-regular-400-7b8124cb811f19c72e48.woff2" as="font" type="font/woff2" crossorigin="anonymous"><link rel="preload" href="https://static.tutsplus.com/packs/static/fonts/fa-brands-400-78547c4b11a377e195ff.woff2" as="font" type="font/woff2" crossorigin="anonymous"><script>window.Tutsplus = {}; window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date; Tutsplus.environment = 'production'; Tutsplus.apexDomain = 'tutsplus.com'; Tutsplus.recaptchaSiteKey = '6Ldpx74UAAAAACuA5loIvNFtSYkAxOiK89Otp9dp'; Tutsplus.rollbarToken = '15981c89d2cb4b20994adb78613f9f59'; Tutsplus.rollbarEnabled = false; Tutsplus.ssoEnabled = true; Tutsplus.ssoServer = 'https://account.envato.com'; Tutsplus.ssoSignInPath = '/sso/sign_in.json'; Tutsplus.resetPasswordPath = 'https://account.envato.com/reset_password?to=tutsplus?to=tutsplus'; Tutsplus.forcedResetPasswordPath = 'https://account.envato.com/password_reset_required?to=tutsplus?to=tutsplus'; Tutsplus.adsEnabled = true; Tutsplus.is_posts_page = true; Tutsplus.is_post_page = true; Tutsplus.ext_social = false; Tutsplus.load_mathjax_library = false; Tutsplus.load_twitter_widget = false;</script><script type="text/javascript" data-turbo-eval="false"> window.addEventListener("CookiebotOnDialogDisplay", (event) => { const cookieDialog = event.srcElement.CookieConsentDialog.DOM cookieDialog.dataset.turbo = false }) </script> <script id="Cookiebot" src="https://consent.cookiebot.com/uc.js" data-cbid="d10f7659-aa82-4007-9cf1-54a9496002bf" data-framework="TCFv2.2" type="text/javascript" data-georegions="{'region':'US','cbid':'d9683f70-895f-4427-97dc-f1087cddf9d8'}" async> </script> <script type="text/plain" data-cookieconsent="statistics" data-test-id="gtm-loader"> window['gtag_enable_tcf_support'] = true; if (!window.gtmLoaded) { (function(w,d,s,l,i) { w[l]=w[l]||[];w[l].push({'gtm.start': new Date().getTime(),event:'gtm.js'}); var f = d.getElementsByTagName(s)[0], j = d.createElement(s), dl = l!='dataLayer'?'&l='+l:''; j.async = true; j.src = 'https://www.googletagmanager.com/gtm.js?id='+i+dl; f.parentNode.insertBefore(j,f); })(window,document,'script','dataLayer','GTM-MXT8M8X'); window.gtmLoaded = true; } </script> <script src="https://static.tutsplus.com/packs/js/runtime-76a1416ff3535925e8ac.js" async="async" data-turbo-suppress-warning="" defer="defer"></script> <script src="https://static.tutsplus.com/packs/js/556-90d5ce5fe5cc14c13198.js" async="async" data-turbo-suppress-warning="" defer="defer"></script> <script src="https://static.tutsplus.com/packs/js/779-582d5befd4c454578e79.js" async="async" data-turbo-suppress-warning="" defer="defer"></script> <script src="https://static.tutsplus.com/packs/js/599-484f62584dbf173654de.js" async="async" data-turbo-suppress-warning="" defer="defer"></script> <script src="https://static.tutsplus.com/packs/js/697-a9d096daf58610e07328.js" async="async" data-turbo-suppress-warning="" defer="defer"></script> <script src="https://static.tutsplus.com/packs/js/894-832ae8a8953d06372554.js" async="async" data-turbo-suppress-warning="" defer="defer"></script> <script src="https://static.tutsplus.com/packs/js/post-7327cdaf9f3fb2bbf8ca.js" async="async" data-turbo-suppress-warning="" defer="defer"></script><link rel="stylesheet" media="all" href="https://static.tutsplus.com/packs/css/697-ce797325.css" /> <link rel="stylesheet" media="all" href="https://static.tutsplus.com/packs/css/post-4aef2c79.css" /><link href="/tailwind.css" rel="stylesheet" type="text/css" /><meta content="no-referrer-when-downgrade" name="referrer" /><meta charset="utf-8" /><meta content="no-cache" name="turbo-cache-control" /><meta content="reload" name="turbo-visit-control" /><meta content="" name="geo-regions" /><meta content="nocache" name="bingbot" /><link href="https://static.tutsplus.com" rel="preconnect" /><title>How to animate CSS Grid layouts (image grid project) | Envato Tuts+</title><link rel="canonical" href="https://webdesign.tutsplus.com/how-to-animate-css-grid-layouts-image-grid-project--cms-108937t" /><link rel="icon" type="image/x-icon" href="https://static.tutsplus.com/packs/static/images/favicon-f8d459d2fa865233f59c.ico" /><link rel="apple-touch-icon" type="image/png" href="https://static.tutsplus.com/packs/static/images/apple-touch-icon-46747f8b314a25bfa124.png" /><link rel="alternate" type="application/atom+xml" title="Atom 1.0" href="https://tutsplus.com/posts.atom" /><meta content="width=device-width, initial-scale=1" name="viewport" /><meta content="index, follow" name="robots" /><meta content="How to animate CSS Grid layouts (image grid project) | Envato Tuts+" property="og:title" /><meta content="Web Design Envato Tuts+" property="og:site_name" /><meta content="1494084460809023" property="fb:app_id" /><meta content="Let me teach you how to animate the CSS Grid properties by building a responsive image grid with hover effects (and the CSS :has() selector)." name="description" property="og:description" /><link href="https://cms-assets.tutsplus.com" rel="preconnect" /><script type="application/ld+json"> { "@context": "https://schema.org", "@type": "Article", "mainEntityOfPage": { "@type": "WebPage", "@id": "https://webdesign.tutsplus.com/how-to-animate-css-grid-layouts-image-grid-project--cms-108937t" }, "headline": "How to animate CSS Grid layouts (image grid project)", "author": { "@type": "Person", "name": "George Martsoukos", "url": "https://tutsplus.com/authors/george-martsoukos" }, "datePublished": "2024-09-30 07:37:55 UTC", "dateModified": "2024-09-30 07:37:55 UTC", "image": "https://cms-assets.tutsplus.com/uploads/users/30/posts/108937/preview_image/grid.jpg", "description": "Let me teach you how to animate the CSS Grid properties by building a responsive image grid with hover effects (and the CSS :has() selector).", "url": "https://webdesign.tutsplus.com/how-to-animate-css-grid-layouts-image-grid-project--cms-108937t", "publisher": { "@type": "Organization", "name": "Envato Tuts", "logo": { "@type": "ImageObject", "url": "https://static.tutsplus.com/packs/static/images/envato-tutsplus-dark-da1bf6c5a7fd83433e94.png"} } }</script><meta content="article" property="og:type" /><meta content="https://webdesign.tutsplus.com/how-to-animate-css-grid-layouts-image-grid-project--cms-108937t" property="og:url" /><link href="https://webdesign.tutsplus.com/how-to-animate-css-grid-layouts-image-grid-project--cms-108937t" hreflang="x-default" rel="alternate" /><link href="https://webdesign.tutsplus.com/how-to-animate-css-grid-layouts-image-grid-project--cms-108937t" hreflang="en" rel="alternate" /><meta content="https://cms-assets.tutsplus.com/uploads/users/30/posts/108937/preview_image/grid.jpg" property="og:image" /><meta content="summary_large_image" name="twitter:card" /><meta content="@tutsplus" name="twitter:site" /><meta content="How to animate CSS Grid layouts (image grid project)" name="twitter:title" /><meta content="Let me teach you how to animate the CSS Grid properties by building a responsive image grid with hover effects (and the CSS :has() selector)." name="twitter:description" /><meta content="https://cms-assets.tutsplus.com/uploads/users/30/posts/108937/preview_image/grid.jpg" name="twitter:image" /><script type="application/ld+json"> { "@context": "https://schema.org", "@type": "Organization", "name": "Envato", "alternateName": "Envato Tuts+", "url": "https://tutsplus.com/", "logo": "https://static.tutsplus.com/packs/static/images/envato-tutsplus-dark-da1bf6c5a7fd83433e94.png", "contactPoint": {"@type": "ContactPoint", "telephone": "+61 3 8376 6284", "contactType": "corporate contact"}, "parentOrganization": {"@type": "Organization", "name": "Envato Pty Ltd", "url": "https://www.envato.com/about"}, "sameAs": [ "https://tutsplus.com/", "https://business.tutsplus.com/", "https://code.tutsplus.com/", "https://design.tutsplus.com/", "https://webdesign.tutsplus.com/", "https://photography.tutsplus.com/", "https://music.tutsplus.com/", "https://cgi.tutsplus.com/", "https://gamedevelopment.tutsplus.com/", "https://computers.tutsplus.com/", "https://elements.envato.com/", "https://themeforest.net/", "https://codecanyon.net/", "https://audiojungle.net/", "https://videohive.net/", "https://graphicriver.net/", "https://photodune.net/", "https://3docean.net/", "https://placeit.net/", "https://mixkit.co/", "https://www.reshot.com/", "https://twitter.com/envato", "https://www.facebook.com/envato", "https://www.youtube.com/user/Envato", "https://www.instagram.com/envato/", "https://www.pinterest.com/envato/", "https://market.envato.com/" ] }</script><script type="application/ld+json"> { "@context": "https://schema.org", "@type": "WebSite", "name": "Envato Tuts+", "url": "https://tutsplus.com" } </script> <script type="application/ld+json"> { "@context": "https://schema.org", "@type": "BreadcrumbList", "mainEntityOfPage": { "@type": "WebPage", "@id": "https://webdesign.tutsplus.com/how-to-animate-css-grid-layouts-image-grid-project--cms-108937t" }, "itemListElement": [{"@type":"ListItem","position":1,"name":"Home","item":{"@type":"Thing","@id":"https://tutsplus.com/"}},{"@type":"ListItem","position":2,"name":"Web Design","item":{"@type":"Thing","@id":"https://webdesign.tutsplus.com"}},{"@type":"ListItem","position":3,"name":"HTML/CSS","item":{"@type":"Thing","@id":"https://webdesign.tutsplus.com/c/htmlcss"}},{"@type":"ListItem","position":4,"name":"CSS","item":{"@type":"Thing","@id":"https://webdesign.tutsplus.com/c/htmlcss/s/css"}}] } </script> <meta content="t60fIs6JfmiK5FpPBlh_bKr5lJSX6abJYYIFjqiFG3M" name="google-site-verification" /><meta content="D3E35339A8EC086B14C62277CBEC8234" name="msvalidate.01" /><meta content="zvqxFgQqdy" name="baidu-site-verification" /></head><body class="page-body body--announcement-bar topic-webdesign post__fullwidth-inarticle-ad-footer" data-analytics-context="body" data-controller="ga-analytics content-filters utm" data-ga-autolink-domains="activeden.net,audiojungle.net,themeforest.net,videohive.net,graphicriver.net,3docean.net,codecanyon.net,photodune.net,market.envato.com,elements.envato.com,build.envatohostedservices.com,author.envato.com,envato.com" data-ga-domain="tutsplus.com" data-utm-is-content-page-value="true" data-utm-utm-campaign-value="cms-108937" data-utm-utm-medium-value="tutorials" data-wt-dcsid="dcs222cpd4g6lg7wb3cum8l5g_6w6m" name="page-body"> <script data-test-id="gtm-page-attributes"> window.dataLayer = window.dataLayer || []; function normalizeAttributeValue(value) { if (value === undefined) return undefined if (value === null) return undefined var normalizedValue = value .toString() .toLowerCase() .trim() .replace(/&/g, '&') .replace(/'/g, "'") .replace(/\s+/g, ' ') if (normalizedValue === '') return undefined return normalizedValue } (function () { if (document.documentElement.hasAttribute('data-turbo-preview')) return var pageAttributes = { app_name: 'tutsplus', app_version: '582', app_env: 'production', topic: 'web design', page_type: 'tutorial', category: 'HTML/CSS', sub_category: 'CSS', software_tag: '', tag: '', ga_param: '' } var normalizedPageAttributes = { event_attributes: null } Object.keys(pageAttributes).forEach(function(key) { normalizedPageAttributes[key] = normalizeAttributeValue(pageAttributes[key]) }) dataLayer.push(normalizedPageAttributes) dataLayer.push({ event: 'analytics_ready', event_attributes: { custom_timestamp: Date.now() } }) })() </script> <noscript data-test-id="gtm-noscript"> <iframe src="https://www.googletagmanager.com/ns.html?id=GTM-MXT8M8X" height="0" width="0" style="display:none;visibility:hidden" > </iframe> </noscript>  <script src="https://static.tutsplus.com/packs/js/global_nav_scroll-e15d1af062eca0d35d71.js" defer="defer"></script><nav class="global-nav view new-nav" data-analytics-context="navigation" data-controller="global-nav"><a class="global-new-nav__skip-to-content-link" data-action="click->global-nav#sendNewNavDataLayerEvent" href="#page-content">Skip to content</a><div class="announcement-bar view announcement-bar--open" data-controller="announcement-bar" data-announcement-id="newbrand_dec24" data-background-image="" data-fallback-background-color="#9CEE69" data-text-color="#000000" data-link-color="#FFFFFF" data-analytics-context="announcement bar" > <div class="announcement-bar__content"> <div class="announcement-bar__primary"> <div class="announcement-bar__title"> <div align="center" class="font-family-polysan-regular"> <span class="announcement-bar__title-desktop"> <strong>Unlimited fonts, graphic templates, mockups, add-ons & more </strong> </span> <span class="announcement-bar__title-mobile"> <strong>Unlimited creative assets </strong> </span> <a rel="noskim" href="https://elements.envato.com/?utm_source=tutsplus.com&utm_medium=promos&utm_campaign=elements_tuts-header_promo" data-action="click->ga-analytics#sendElementsClickEvent">From $16.50/m</a> </div> <style> .announcement-bar__title a { border-radius:4px; background-color:#191919; padding:0px 20px; box-shadow:0px 0px 0px #aeec7b; margin:10px 10px 10px 10px; font-size:12px; height:30px; line-height:30px; text-decoration:none; color:#ffffff; } .announcement-bar__title a:hover { background-color: #383838; text-decoration:none; color:#25410d; } </style> </div> </div> <div class="announcement-bar__secondary"> <a title="Close this announcement bar" class="announcement-bar__close-link" data-action="click->announcement-bar#close click->global-nav#onAnnouncementBarClose" href="#"> <span class="announcement-bar__close-label">Dismiss</span> <i class="fa fa-times announcement-bar__close-icon"></i> </a> </div> </div> </div> <div class="global-nav__mobile-closed"><div class="nav-actions"><a class="mobile-menu-icon mobile-header-action" data-action="click->global-nav#toggle" href="javascript:"><i class="fa fa-reorder"></i></a><a class="global-nav__header-tuts-logo-link mobile-header-action mobile-home-logo" data-action="click->global-nav#sendNewNavDataLayerEvent" href="https://tutsplus.com/"><img alt="envato-tuts+" class="global-nav__header-tuts-logo-image new-nav-mobile" src="https://static.tutsplus.com/packs/static/images/envato-tutsplus-dark-da1bf6c5a7fd83433e94.png" /></a><a class="mobile-search-icon mobile-header-action" data-action="click->global-nav#toggle" href="javascript:"><i class="fa fa-magnifying-glass"></i></a></div></div><div class="global-nav__mobile-overlay"></div><div class="global-nav__mobile-new"><section class="view global-nav__mobile-open-header"><a class="global-nav__header-tuts-logo-link mobile-header-action mobile-home-logo" data-action="click->global-nav#sendNewNavDataLayerEvent" href="https://tutsplus.com/"><img alt="envato-tuts+" class="global-nav__header-tuts-logo-image new-nav-mobile" src="https://static.tutsplus.com/packs/static/images/envato-tutsplus-dark-da1bf6c5a7fd83433e94.png" /></a><a class="mobile-close-icon mobile-header-action" data-action="click->global-nav#toggle" href="javascript:"><i class="fa fa-times"></i></a></section><section class="global-nav__mobile-search view new-nav-mobile" data-controller="global-search"><form class="global-nav__search-form mobile" data-turbo="false" data-action="submit->global-nav#sendSearchDataLayerEvent submit->global-search#perform_search" action="https://webdesign.tutsplus.com/t/tutorials/search" accept-charset="UTF-8" method="get"><input type="text" name="search[terms]" id="search_terms" value="" placeholder="Search tutorials, courses and resources" class="font-family-polysan-regular !global-nav__search-terms" data-action="keydown->global-search#keydown input->global-search#auto_suggestions focus->global-search#focus_in" /> <div class="search__auto_suggestions_container " data-global-search-target="suggestionContainer" data-action="mousedown->global-search#onSuggestionContainerMousedown" > <div class="search__auto_suggestions_content"> <div class="search__auto_suggesstion_list_container"> <div class="search__auto_suggesstion_list_content"> <ul class="search__auto_suggesstion_list" role="listbox" data-global-search-target="suggestionList"> </ul> </div> </div> </div> </div><button name="button" type="submit" class="global-nav__search-button" aria-label="Search"><i class="fa fa-search"></i></button></form></section><ul class='global-nav__mobile-top-level new-nav-mobile'> <li class='global-nav__mobile-top-level-item' test-nav-item-name='Design'> <a href='https://design.tutsplus.com' class='global-nav__mobile-top-level-link global-nav__mobile-top-level-link-new-nav' data-action=''> <span class='global-nav__mobile-top-level-link-title'> Design </span> </a> </li> <li class='global-nav__mobile-top-level-item' test-nav-item-name='Business'> <a href='https://business.tutsplus.com' class='global-nav__mobile-top-level-link global-nav__mobile-top-level-link-new-nav' data-action=''> <span class='global-nav__mobile-top-level-link-title'> Business </span> </a> </li> <li class='global-nav__mobile-top-level-item' test-nav-item-name='Photo'> <a href='https://photography.tutsplus.com/photo' class='global-nav__mobile-top-level-link global-nav__mobile-top-level-link-new-nav' data-action=''> <span class='global-nav__mobile-top-level-link-title'> Photo </span> </a> </li> <li class='global-nav__mobile-top-level-item' test-nav-item-name='Video'> <a href='https://photography.tutsplus.com/video' class='global-nav__mobile-top-level-link global-nav__mobile-top-level-link-new-nav' data-action=''> <span class='global-nav__mobile-top-level-link-title'> Video </span> </a> </li> <li class='global-nav__mobile-top-level-item' test-nav-item-name='Web Design'> <a href='javascript:' class='global-nav__mobile-top-level-link global-nav__mobile-top-level-link-new-nav' data-action='click->global-nav#toggleSecondLevelSection'> <span class='global-nav__mobile-top-level-link-title'> Web Design </span> <span class='global-nav__mobile-top-level-expand-text'> <i class='fa fa-angle-right global-nav__mobile-top-level-link-icon'></i> </span> </a> <div class='global-nav__mobile-second-level-new'> <div class='global-nav__mobile-new'> <section class='view global-nav__mobile-open-header'> <a href='javascript:' class='mobile-action-icon mobile-back-icon' data-action='click->global-nav#toggleSecondLevelSection'> <i class='fa fa-arrow-left'></i> </a> <a href='javascript:' class='mobile-action-icon mobile-close-icon' data-action='click->global-nav#toggleSecondLevelSection global-nav#toggle'> <i class='fa fa-times'></i> </a> </section> <section class='view global-nav__mobile-second-level-heading '> <span class='global-nav__mobile-second-level-heading-title'> Web Design </span> <a href='https://webdesign.tutsplus.com' class='global-nav__mobile-second-level-heading-link' data-action='click->global-nav#sendNewNavDataLayerEvent'> <span class='global-nav__mobile-second-level-heading-link-text'> View all Web Design </span> <span class='global-nav__mobile-second-level-heading-link-icon'> <i class='fa fa-angle-right'></i> </span> </a> </section> <div class='global-nav__mobile-second-level-links-title'>Start Learning</div> <ul class='global-nav__mobile-second-level-links'> <li class='global-nav__mobile-second-level-link-item' test-nav-item-name='Software'> <a href='javascript:' class='global-nav__mobile-second-level-link' data-action='click->global-nav#toggleThirdLevelSection'> <span class='global-nav__mobile-second-level-link-title'> Software </span> <span class='global-nav__mobile-second-level-link-icon'> <i class='fa fa-angle-right'></i> </span> </a> <div class='global-nav__mobile-third-level-new'> <div class='global-nav__mobile-new'> <section class='view global-nav__mobile-open-header'> <a href='javascript:' class='mobile-action-icon mobile-back-icon' data-action='click->global-nav#toggleThirdLevelSection'> <i class='fa fa-arrow-left'></i> </a> <a href='javascript:' class='mobile-action-icon mobile-close-icon' data-action='click->global-nav#toggleThirdLevelSection global-nav#toggleSecondLevelSection global-nav#toggle'> <i class='fa fa-times'></i> </a> </section> <section class='view global-nav__mobile-third-level-heading global-nav__mobile-third-level-heading-without-link'> <span class='global-nav__mobile-third-level-heading-title'> Software </span> </section> <div class='global-nav__mobile-third-level-links-title empty-title'> </div> <ul class='global-nav__mobile-third-level-links'> <li class='global-nav__mobile-third-level-link-item' test-nav-item-name='Sketch'> <a href='https://webdesign.tutsplus.com/compatible-with/sketch' class='global-nav__mobile-third-level-link' data-action='click->global-nav#sendNewNavDataLayerEvent'> <img class='global-nav__mobile-popular-software-icon' src='https://static.tutsplus.com/packs/static/images/popular_software/webdesign/sketch@2x-06b2d1b0b5e67fbd7a46.png' loading='lazy'> <span class='global-nav__mobile-third-level-link-title'> Sketch </span> </a> </li> <li class='global-nav__mobile-third-level-link-item' test-nav-item-name='Figma'> <a href='https://webdesign.tutsplus.com/compatible-with/figma' class='global-nav__mobile-third-level-link' data-action='click->global-nav#sendNewNavDataLayerEvent'> <img class='global-nav__mobile-popular-software-icon' src='https://static.tutsplus.com/packs/static/images/popular_software/webdesign/figma@2x-9b6b6b30267a5cb7e475.png' loading='lazy'> <span class='global-nav__mobile-third-level-link-title'> Figma </span> </a> </li> <li class='global-nav__mobile-third-level-link-item' test-nav-item-name='Adobe XD'> <a href='https://webdesign.tutsplus.com/compatible-with/adobe-xd' class='global-nav__mobile-third-level-link' data-action='click->global-nav#sendNewNavDataLayerEvent'> <img class='global-nav__mobile-popular-software-icon' src='https://static.tutsplus.com/packs/static/images/popular_software/webdesign/xd@2x-727778ad5bc8388de2c8.png' loading='lazy'> <span class='global-nav__mobile-third-level-link-title'> Adobe XD </span> </a> </li> <li class='global-nav__mobile-third-level-link-item' test-nav-item-name='Sublime Text'> <a href='https://webdesign.tutsplus.com/compatible-with/sublime-text' class='global-nav__mobile-third-level-link' data-action='click->global-nav#sendNewNavDataLayerEvent'> <img class='global-nav__mobile-popular-software-icon' src='https://static.tutsplus.com/packs/static/images/popular_software/webdesign/sublime@2x-ffbddc90d1c534b42d83.png' loading='lazy'> <span class='global-nav__mobile-third-level-link-title'> Sublime Text </span> </a> </li> <li class='global-nav__mobile-third-level-link-item' test-nav-item-name='Visual Studio Code'> <a href='https://webdesign.tutsplus.com/compatible-with/visual-studio-code' class='global-nav__mobile-third-level-link' data-action='click->global-nav#sendNewNavDataLayerEvent'> <img class='global-nav__mobile-popular-software-icon' src='https://static.tutsplus.com/packs/static/images/popular_software/webdesign/vscode@2x-3da3dc440f7877aa3715.png' loading='lazy'> <span class='global-nav__mobile-third-level-link-title'> Visual Studio Code </span> </a> </li> <li class='global-nav__mobile-third-level-link-item' test-nav-item-name='MailChimp'> <a href='https://webdesign.tutsplus.com/compatible-with/mailchimp' class='global-nav__mobile-third-level-link' data-action='click->global-nav#sendNewNavDataLayerEvent'> <img class='global-nav__mobile-popular-software-icon' src='https://static.tutsplus.com/packs/static/images/popular_software/webdesign/mailchimp@2x-12ec7ec155f7365c14a0.png' loading='lazy'> <span class='global-nav__mobile-third-level-link-title'> MailChimp </span> </a> </li> <li class='global-nav__mobile-third-level-link-item' test-nav-item-name='Webflow'> <a href='https://webdesign.tutsplus.com/compatible-with/webflow' class='global-nav__mobile-third-level-link' data-action='click->global-nav#sendNewNavDataLayerEvent'> <img class='global-nav__mobile-popular-software-icon' src='https://static.tutsplus.com/packs/static/images/popular_software/webdesign/webflow@2x-c488c71766a27a4ca131.png' loading='lazy'> <span class='global-nav__mobile-third-level-link-title'> Webflow </span> </a> </li> <li class='global-nav__mobile-third-level-link-item' test-nav-item-name='Campaign Monitor'> <a href='https://webdesign.tutsplus.com/compatible-with/campaign-monitor' class='global-nav__mobile-third-level-link' data-action='click->global-nav#sendNewNavDataLayerEvent'> <img class='global-nav__mobile-popular-software-icon' src='https://static.tutsplus.com/packs/static/images/popular_software/webdesign/campaign_monitor@2x-097a4d858a7583260178.png' loading='lazy'> <span class='global-nav__mobile-third-level-link-title'> Campaign Monitor </span> </a> </li> <li class='global-nav__mobile-third-level-link-item' test-nav-item-name='AI Tools'> <a href='https://webdesign.tutsplus.com/compatible-with/ai-tools' class='global-nav__mobile-third-level-link' data-action='click->global-nav#sendNewNavDataLayerEvent'> <img class='global-nav__mobile-popular-software-icon' src='https://static.tutsplus.com/packs/static/images/popular_software/webdesign/ai_tools@2x-829ddec496349c126fb9.png' loading='lazy'> <span class='global-nav__mobile-third-level-link-title'> AI Tools </span> </a> </li> </ul> </div> </div> </li> <li class='global-nav__mobile-second-level-link-item' test-nav-item-name='WordPress'> <a href='javascript:' class='global-nav__mobile-second-level-link' data-action='click->global-nav#toggleThirdLevelSection'> <span class='global-nav__mobile-second-level-link-title'> WordPress </span> <span class='global-nav__mobile-second-level-link-icon'> <i class='fa fa-angle-right'></i> </span> </a> <div class='global-nav__mobile-third-level-new'> <div class='global-nav__mobile-new'> <section class='view global-nav__mobile-open-header'> <a href='javascript:' class='mobile-action-icon mobile-back-icon' data-action='click->global-nav#toggleThirdLevelSection'> <i class='fa fa-arrow-left'></i> </a> <a href='javascript:' class='mobile-action-icon mobile-close-icon' data-action='click->global-nav#toggleThirdLevelSection global-nav#toggleSecondLevelSection global-nav#toggle'> <i class='fa fa-times'></i> </a> </section> <section class='view global-nav__mobile-third-level-heading '> <span class='global-nav__mobile-third-level-heading-title'> WordPress </span> <a href='https://webdesign.tutsplus.com/c/wordpress' class='global-nav__mobile-third-level-heading-link' data-action='click->global-nav#sendNewNavDataLayerEvent'> <span class='global-nav__mobile-third-level-heading-link-text'> View all WordPress </span> <span class='global-nav__mobile-third-level-heading-link-icon'> <i class='fa fa-angle-right'></i> </span> </a> </section> <div class='global-nav__mobile-second-level-links-title empty-title'></div> <ul class='global-nav__mobile-third-level-links'> <li class='global-nav__mobile-third-level-link-item' test-nav-item-name='WordPress CMS'> <a href='https://webdesign.tutsplus.com/c/wordpress/s/wordpress-cms' class='global-nav__mobile-third-level-link' data-action='click->global-nav#sendNewNavDataLayerEvent'> <span class='global-nav__mobile-third-level-link-title'> WordPress CMS </span> </a> </li> <li class='global-nav__mobile-third-level-link-item' test-nav-item-name='WordPress Themes'> <a href='https://webdesign.tutsplus.com/c/wordpress/s/wordpress-themes' class='global-nav__mobile-third-level-link' data-action='click->global-nav#sendNewNavDataLayerEvent'> <span class='global-nav__mobile-third-level-link-title'> WordPress Themes </span> </a> </li> <li class='global-nav__mobile-third-level-link-item' test-nav-item-name='WordPress Plugins'> <a href='https://webdesign.tutsplus.com/c/wordpress/s/wordpress-plugins' class='global-nav__mobile-third-level-link' data-action='click->global-nav#sendNewNavDataLayerEvent'> <span class='global-nav__mobile-third-level-link-title'> WordPress Plugins </span> </a> </li> <li class='global-nav__mobile-third-level-link-item' test-nav-item-name='WordPress Hosting'> <a href='https://webdesign.tutsplus.com/c/wordpress/s/wordpress-hosting' class='global-nav__mobile-third-level-link' data-action='click->global-nav#sendNewNavDataLayerEvent'> <span class='global-nav__mobile-third-level-link-title'> WordPress Hosting </span> </a> </li> <li class='global-nav__mobile-third-level-link-item' test-nav-item-name='Elementor'> <a href='https://webdesign.tutsplus.com/c/wordpress/s/elementor' class='global-nav__mobile-third-level-link' data-action='click->global-nav#sendNewNavDataLayerEvent'> <span class='global-nav__mobile-third-level-link-title'> Elementor </span> </a> </li> </ul> </div> </div> </li> <li class='global-nav__mobile-second-level-link-item' test-nav-item-name='HTML/CSS'> <a href='javascript:' class='global-nav__mobile-second-level-link' data-action='click->global-nav#toggleThirdLevelSection'> <span class='global-nav__mobile-second-level-link-title'> HTML/CSS </span> <span class='global-nav__mobile-second-level-link-icon'> <i class='fa fa-angle-right'></i> </span> </a> <div class='global-nav__mobile-third-level-new'> <div class='global-nav__mobile-new'> <section class='view global-nav__mobile-open-header'> <a href='javascript:' class='mobile-action-icon mobile-back-icon' data-action='click->global-nav#toggleThirdLevelSection'> <i class='fa fa-arrow-left'></i> </a> <a href='javascript:' class='mobile-action-icon mobile-close-icon' data-action='click->global-nav#toggleThirdLevelSection global-nav#toggleSecondLevelSection global-nav#toggle'> <i class='fa fa-times'></i> </a> </section> <section class='view global-nav__mobile-third-level-heading '> <span class='global-nav__mobile-third-level-heading-title'> HTML/CSS </span> <a href='https://webdesign.tutsplus.com/c/htmlcss' class='global-nav__mobile-third-level-heading-link' data-action='click->global-nav#sendNewNavDataLayerEvent'> <span class='global-nav__mobile-third-level-heading-link-text'> View all HTML/CSS </span> <span class='global-nav__mobile-third-level-heading-link-icon'> <i class='fa fa-angle-right'></i> </span> </a> </section> <div class='global-nav__mobile-second-level-links-title empty-title'></div> <ul class='global-nav__mobile-third-level-links'> <li class='global-nav__mobile-third-level-link-item' test-nav-item-name='HTML'> <a href='https://webdesign.tutsplus.com/c/htmlcss/s/html' class='global-nav__mobile-third-level-link' data-action='click->global-nav#sendNewNavDataLayerEvent'> <span class='global-nav__mobile-third-level-link-title'> HTML </span> </a> </li> <li class='global-nav__mobile-third-level-link-item' test-nav-item-name='CSS'> <a href='https://webdesign.tutsplus.com/c/htmlcss/s/css' class='global-nav__mobile-third-level-link' data-action='click->global-nav#sendNewNavDataLayerEvent'> <span class='global-nav__mobile-third-level-link-title'> CSS </span> </a> </li> <li class='global-nav__mobile-third-level-link-item' test-nav-item-name='JavaScript for Designers'> <a href='https://webdesign.tutsplus.com/c/htmlcss/s/javascript-for-designers' class='global-nav__mobile-third-level-link' data-action='click->global-nav#sendNewNavDataLayerEvent'> <span class='global-nav__mobile-third-level-link-title'> JavaScript for Designers </span> </a> </li> <li class='global-nav__mobile-third-level-link-item' test-nav-item-name='Bootstrap'> <a href='https://webdesign.tutsplus.com/c/htmlcss/s/bootstrap' class='global-nav__mobile-third-level-link' data-action='click->global-nav#sendNewNavDataLayerEvent'> <span class='global-nav__mobile-third-level-link-title'> Bootstrap </span> </a> </li> <li class='global-nav__mobile-third-level-link-item' test-nav-item-name='Animation'> <a href='https://webdesign.tutsplus.com/c/htmlcss/s/animation' class='global-nav__mobile-third-level-link' data-action='click->global-nav#sendNewNavDataLayerEvent'> <span class='global-nav__mobile-third-level-link-title'> Animation </span> </a> </li> <li class='global-nav__mobile-third-level-link-item' test-nav-item-name='HTML Templates'> <a href='https://webdesign.tutsplus.com/c/htmlcss/s/html-templates' class='global-nav__mobile-third-level-link' data-action='click->global-nav#sendNewNavDataLayerEvent'> <span class='global-nav__mobile-third-level-link-title'> HTML Templates </span> </a> </li> <li class='global-nav__mobile-third-level-link-item' test-nav-item-name='Landing Pages'> <a href='https://webdesign.tutsplus.com/c/htmlcss/s/landing-pages' class='global-nav__mobile-third-level-link' data-action='click->global-nav#sendNewNavDataLayerEvent'> <span class='global-nav__mobile-third-level-link-title'> Landing Pages </span> </a> </li> <li class='global-nav__mobile-third-level-link-item' test-nav-item-name='SVG'> <a href='https://webdesign.tutsplus.com/c/htmlcss/s/svg' class='global-nav__mobile-third-level-link' data-action='click->global-nav#sendNewNavDataLayerEvent'> <span class='global-nav__mobile-third-level-link-title'> SVG </span> </a> </li> </ul> </div> </div> </li> <li class='global-nav__mobile-second-level-link-item' test-nav-item-name='Email'> <a href='javascript:' class='global-nav__mobile-second-level-link' data-action='click->global-nav#toggleThirdLevelSection'> <span class='global-nav__mobile-second-level-link-title'> Email </span> <span class='global-nav__mobile-second-level-link-icon'> <i class='fa fa-angle-right'></i> </span> </a> <div class='global-nav__mobile-third-level-new'> <div class='global-nav__mobile-new'> <section class='view global-nav__mobile-open-header'> <a href='javascript:' class='mobile-action-icon mobile-back-icon' data-action='click->global-nav#toggleThirdLevelSection'> <i class='fa fa-arrow-left'></i> </a> <a href='javascript:' class='mobile-action-icon mobile-close-icon' data-action='click->global-nav#toggleThirdLevelSection global-nav#toggleSecondLevelSection global-nav#toggle'> <i class='fa fa-times'></i> </a> </section> <section class='view global-nav__mobile-third-level-heading '> <span class='global-nav__mobile-third-level-heading-title'> Email </span> <a href='https://webdesign.tutsplus.com/c/email' class='global-nav__mobile-third-level-heading-link' data-action='click->global-nav#sendNewNavDataLayerEvent'> <span class='global-nav__mobile-third-level-heading-link-text'> View all Email </span> <span class='global-nav__mobile-third-level-heading-link-icon'> <i class='fa fa-angle-right'></i> </span> </a> </section> <div class='global-nav__mobile-second-level-links-title empty-title'></div> <ul class='global-nav__mobile-third-level-links'> <li class='global-nav__mobile-third-level-link-item' test-nav-item-name='Email Design'> <a href='https://webdesign.tutsplus.com/c/email/s/email-design' class='global-nav__mobile-third-level-link' data-action='click->global-nav#sendNewNavDataLayerEvent'> <span class='global-nav__mobile-third-level-link-title'> Email Design </span> </a> </li> <li class='global-nav__mobile-third-level-link-item' test-nav-item-name='Email Templates'> <a href='https://webdesign.tutsplus.com/c/email/s/email-templates' class='global-nav__mobile-third-level-link' data-action='click->global-nav#sendNewNavDataLayerEvent'> <span class='global-nav__mobile-third-level-link-title'> Email Templates </span> </a> </li> <li class='global-nav__mobile-third-level-link-item' test-nav-item-name='Email Marketing'> <a href='https://webdesign.tutsplus.com/c/email/s/email-marketing' class='global-nav__mobile-third-level-link' data-action='click->global-nav#sendNewNavDataLayerEvent'> <span class='global-nav__mobile-third-level-link-title'> Email Marketing </span> </a> </li> </ul> <div class='global-nav__mobile-third-level-links-title '> popular software in Email </div> <ul class='global-nav__mobile-third-level-links'> <li class='global-nav__mobile-third-level-link-item' test-nav-item-name='Campaign Monitor'> <a href='https://webdesign.tutsplus.com/c/email/compatible-with/campaign-monitor' class='global-nav__mobile-third-level-link' data-action='click->global-nav#sendNewNavDataLayerEvent'> <img class='global-nav__mobile-popular-software-icon' src='https://static.tutsplus.com/packs/static/images/popular_software/webdesign/campaign_monitor@2x-097a4d858a7583260178.png' loading='lazy'> <span class='global-nav__mobile-third-level-link-title'> Campaign Monitor </span> </a> </li> <li class='global-nav__mobile-third-level-link-item' test-nav-item-name='MailChimp'> <a href='https://webdesign.tutsplus.com/c/email/compatible-with/mailchimp' class='global-nav__mobile-third-level-link' data-action='click->global-nav#sendNewNavDataLayerEvent'> <img class='global-nav__mobile-popular-software-icon' src='https://static.tutsplus.com/packs/static/images/popular_software/webdesign/mailchimp@2x-12ec7ec155f7365c14a0.png' loading='lazy'> <span class='global-nav__mobile-third-level-link-title'> MailChimp </span> </a> </li> </ul> </div> </div> </li> <li class='global-nav__mobile-second-level-link-item' test-nav-item-name='UX/UI'> <a href='javascript:' class='global-nav__mobile-second-level-link' data-action='click->global-nav#toggleThirdLevelSection'> <span class='global-nav__mobile-second-level-link-title'> UX/UI </span> <span class='global-nav__mobile-second-level-link-icon'> <i class='fa fa-angle-right'></i> </span> </a> <div class='global-nav__mobile-third-level-new'> <div class='global-nav__mobile-new'> <section class='view global-nav__mobile-open-header'> <a href='javascript:' class='mobile-action-icon mobile-back-icon' data-action='click->global-nav#toggleThirdLevelSection'> <i class='fa fa-arrow-left'></i> </a> <a href='javascript:' class='mobile-action-icon mobile-close-icon' data-action='click->global-nav#toggleThirdLevelSection global-nav#toggleSecondLevelSection global-nav#toggle'> <i class='fa fa-times'></i> </a> </section> <section class='view global-nav__mobile-third-level-heading '> <span class='global-nav__mobile-third-level-heading-title'> UX/UI </span> <a href='https://webdesign.tutsplus.com/c/uxui' class='global-nav__mobile-third-level-heading-link' data-action='click->global-nav#sendNewNavDataLayerEvent'> <span class='global-nav__mobile-third-level-heading-link-text'> View all UX/UI </span> <span class='global-nav__mobile-third-level-heading-link-icon'> <i class='fa fa-angle-right'></i> </span> </a> </section> <div class='global-nav__mobile-second-level-links-title '>Learn UI Design</div> <ul class='global-nav__mobile-third-level-links'> <li class='global-nav__mobile-third-level-link-item' test-nav-item-name='Forms'> <a href='https://webdesign.tutsplus.com/c/uxui/s/forms' class='global-nav__mobile-third-level-link' data-action='click->global-nav#sendNewNavDataLayerEvent'> <span class='global-nav__mobile-third-level-link-title'> Forms </span> </a> </li> <li class='global-nav__mobile-third-level-link-item' test-nav-item-name='Icon Design'> <a href='https://webdesign.tutsplus.com/c/uxui/s/icon-design' class='global-nav__mobile-third-level-link' data-action='click->global-nav#sendNewNavDataLayerEvent'> <span class='global-nav__mobile-third-level-link-title'> Icon Design </span> </a> </li> <li class='global-nav__mobile-third-level-link-item' test-nav-item-name='Navigation'> <a href='https://webdesign.tutsplus.com/c/uxui/s/navigation' class='global-nav__mobile-third-level-link' data-action='click->global-nav#sendNewNavDataLayerEvent'> <span class='global-nav__mobile-third-level-link-title'> Navigation </span> </a> </li> <li class='global-nav__mobile-third-level-link-item' test-nav-item-name='Prototyping'> <a href='https://webdesign.tutsplus.com/c/uxui/s/prototyping' class='global-nav__mobile-third-level-link' data-action='click->global-nav#sendNewNavDataLayerEvent'> <span class='global-nav__mobile-third-level-link-title'> Prototyping </span> </a> </li> <li class='global-nav__mobile-third-level-link-item' test-nav-item-name='Wireframing'> <a href='https://webdesign.tutsplus.com/c/uxui/s/wireframing' class='global-nav__mobile-third-level-link' data-action='click->global-nav#sendNewNavDataLayerEvent'> <span class='global-nav__mobile-third-level-link-title'> Wireframing </span> </a> </li> <li class='global-nav__mobile-third-level-link-item' test-nav-item-name='Web Typography'> <a href='https://webdesign.tutsplus.com/c/uxui/s/web-typography' class='global-nav__mobile-third-level-link' data-action='click->global-nav#sendNewNavDataLayerEvent'> <span class='global-nav__mobile-third-level-link-title'> Web Typography </span> </a> </li> <li class='global-nav__mobile-third-level-link-item' test-nav-item-name='Material Design'> <a href='https://webdesign.tutsplus.com/c/uxui/s/material-design' class='global-nav__mobile-third-level-link' data-action='click->global-nav#sendNewNavDataLayerEvent'> <span class='global-nav__mobile-third-level-link-title'> Material Design </span> </a> </li> <li class='global-nav__mobile-third-level-link-item' test-nav-item-name='Design Theory'> <a href='https://webdesign.tutsplus.com/c/uxui/s/design-theory' class='global-nav__mobile-third-level-link' data-action='click->global-nav#sendNewNavDataLayerEvent'> <span class='global-nav__mobile-third-level-link-title'> Design Theory </span> </a> </li> <li class='global-nav__mobile-third-level-link-item' test-nav-item-name='Design Systems'> <a href='https://webdesign.tutsplus.com/c/uxui/s/design-systems' class='global-nav__mobile-third-level-link' data-action='click->global-nav#sendNewNavDataLayerEvent'> <span class='global-nav__mobile-third-level-link-title'> Design Systems </span> </a> </li> </ul> <div class='global-nav__mobile-second-level-links-title '>Learn UX Design</div> <ul class='global-nav__mobile-third-level-links'> <li class='global-nav__mobile-third-level-link-item' test-nav-item-name='User Research'> <a href='https://webdesign.tutsplus.com/c/uxui/s/user-research' class='global-nav__mobile-third-level-link' data-action='click->global-nav#sendNewNavDataLayerEvent'> <span class='global-nav__mobile-third-level-link-title'> User Research </span> </a> </li> <li class='global-nav__mobile-third-level-link-item' test-nav-item-name='User Testing'> <a href='https://webdesign.tutsplus.com/c/uxui/s/user-testing' class='global-nav__mobile-third-level-link' data-action='click->global-nav#sendNewNavDataLayerEvent'> <span class='global-nav__mobile-third-level-link-title'> User Testing </span> </a> </li> <li class='global-nav__mobile-third-level-link-item' test-nav-item-name='Responsive Design'> <a href='https://webdesign.tutsplus.com/c/uxui/s/responsive-design' class='global-nav__mobile-third-level-link' data-action='click->global-nav#sendNewNavDataLayerEvent'> <span class='global-nav__mobile-third-level-link-title'> Responsive Design </span> </a> </li> <li class='global-nav__mobile-third-level-link-item' test-nav-item-name='Usability'> <a href='https://webdesign.tutsplus.com/c/uxui/s/usability' class='global-nav__mobile-third-level-link' data-action='click->global-nav#sendNewNavDataLayerEvent'> <span class='global-nav__mobile-third-level-link-title'> Usability </span> </a> </li> <li class='global-nav__mobile-third-level-link-item' test-nav-item-name='Accessibility'> <a href='https://webdesign.tutsplus.com/c/uxui/s/accessibility' class='global-nav__mobile-third-level-link' data-action='click->global-nav#sendNewNavDataLayerEvent'> <span class='global-nav__mobile-third-level-link-title'> Accessibility </span> </a> </li> </ul> <div class='global-nav__mobile-third-level-links-title '> popular software in UX/UI </div> <ul class='global-nav__mobile-third-level-links'> <li class='global-nav__mobile-third-level-link-item' test-nav-item-name='Sketch'> <a href='https://webdesign.tutsplus.com/c/uxui/compatible-with/sketch' class='global-nav__mobile-third-level-link' data-action='click->global-nav#sendNewNavDataLayerEvent'> <img class='global-nav__mobile-popular-software-icon' src='https://static.tutsplus.com/packs/static/images/popular_software/webdesign/sketch@2x-06b2d1b0b5e67fbd7a46.png' loading='lazy'> <span class='global-nav__mobile-third-level-link-title'> Sketch </span> </a> </li> <li class='global-nav__mobile-third-level-link-item' test-nav-item-name='Figma'> <a href='https://webdesign.tutsplus.com/c/uxui/compatible-with/figma' class='global-nav__mobile-third-level-link' data-action='click->global-nav#sendNewNavDataLayerEvent'> <img class='global-nav__mobile-popular-software-icon' src='https://static.tutsplus.com/packs/static/images/popular_software/webdesign/figma@2x-9b6b6b30267a5cb7e475.png' loading='lazy'> <span class='global-nav__mobile-third-level-link-title'> Figma </span> </a> </li> <li class='global-nav__mobile-third-level-link-item' test-nav-item-name='Adobe XD'> <a href='https://webdesign.tutsplus.com/c/uxui/compatible-with/adobe-xd' class='global-nav__mobile-third-level-link' data-action='click->global-nav#sendNewNavDataLayerEvent'> <img class='global-nav__mobile-popular-software-icon' src='https://static.tutsplus.com/packs/static/images/popular_software/webdesign/xd@2x-727778ad5bc8388de2c8.png' loading='lazy'> <span class='global-nav__mobile-third-level-link-title'> Adobe XD </span> </a> </li> <li class='global-nav__mobile-third-level-link-item' test-nav-item-name='Webflow'> <a href='https://webdesign.tutsplus.com/c/uxui/compatible-with/webflow' class='global-nav__mobile-third-level-link' data-action='click->global-nav#sendNewNavDataLayerEvent'> <img class='global-nav__mobile-popular-software-icon' src='https://static.tutsplus.com/packs/static/images/popular_software/webdesign/webflow@2x-c488c71766a27a4ca131.png' loading='lazy'> <span class='global-nav__mobile-third-level-link-title'> Webflow </span> </a> </li> </ul> </div> </div> </li> <li class='global-nav__mobile-second-level-link-item' test-nav-item-name='SEO'> <a href='javascript:' class='global-nav__mobile-second-level-link' data-action='click->global-nav#toggleThirdLevelSection'> <span class='global-nav__mobile-second-level-link-title'> SEO </span> <span class='global-nav__mobile-second-level-link-icon'> <i class='fa fa-angle-right'></i> </span> </a> <div class='global-nav__mobile-third-level-new'> <div class='global-nav__mobile-new'> <section class='view global-nav__mobile-open-header'> <a href='javascript:' class='mobile-action-icon mobile-back-icon' data-action='click->global-nav#toggleThirdLevelSection'> <i class='fa fa-arrow-left'></i> </a> <a href='javascript:' class='mobile-action-icon mobile-close-icon' data-action='click->global-nav#toggleThirdLevelSection global-nav#toggleSecondLevelSection global-nav#toggle'> <i class='fa fa-times'></i> </a> </section> <section class='view global-nav__mobile-third-level-heading '> <span class='global-nav__mobile-third-level-heading-title'> SEO </span> <a href='https://webdesign.tutsplus.com/c/seo' class='global-nav__mobile-third-level-heading-link' data-action='click->global-nav#sendNewNavDataLayerEvent'> <span class='global-nav__mobile-third-level-heading-link-text'> View all SEO </span> <span class='global-nav__mobile-third-level-heading-link-icon'> <i class='fa fa-angle-right'></i> </span> </a> </section> <div class='global-nav__mobile-second-level-links-title empty-title'></div> <ul class='global-nav__mobile-third-level-links'> <li class='global-nav__mobile-third-level-link-item' test-nav-item-name='Content Strategy'> <a href='https://webdesign.tutsplus.com/c/seo/s/content-strategy' class='global-nav__mobile-third-level-link' data-action='click->global-nav#sendNewNavDataLayerEvent'> <span class='global-nav__mobile-third-level-link-title'> Content Strategy </span> </a> </li> <li class='global-nav__mobile-third-level-link-item' test-nav-item-name='Conversion'> <a href='https://webdesign.tutsplus.com/c/seo/s/conversion' class='global-nav__mobile-third-level-link' data-action='click->global-nav#sendNewNavDataLayerEvent'> <span class='global-nav__mobile-third-level-link-title'> Conversion </span> </a> </li> <li class='global-nav__mobile-third-level-link-item' test-nav-item-name='Performance'> <a href='https://webdesign.tutsplus.com/c/seo/s/performance' class='global-nav__mobile-third-level-link' data-action='click->global-nav#sendNewNavDataLayerEvent'> <span class='global-nav__mobile-third-level-link-title'> Performance </span> </a> </li> </ul> </div> </div> </li> <li class='global-nav__mobile-second-level-link-item' test-nav-item-name='eCommerce'> <a href='javascript:' class='global-nav__mobile-second-level-link' data-action='click->global-nav#toggleThirdLevelSection'> <span class='global-nav__mobile-second-level-link-title'> eCommerce </span> <span class='global-nav__mobile-second-level-link-icon'> <i class='fa fa-angle-right'></i> </span> </a> <div class='global-nav__mobile-third-level-new'> <div class='global-nav__mobile-new'> <section class='view global-nav__mobile-open-header'> <a href='javascript:' class='mobile-action-icon mobile-back-icon' data-action='click->global-nav#toggleThirdLevelSection'> <i class='fa fa-arrow-left'></i> </a> <a href='javascript:' class='mobile-action-icon mobile-close-icon' data-action='click->global-nav#toggleThirdLevelSection global-nav#toggleSecondLevelSection global-nav#toggle'> <i class='fa fa-times'></i> </a> </section> <section class='view global-nav__mobile-third-level-heading '> <span class='global-nav__mobile-third-level-heading-title'> eCommerce </span> <a href='https://webdesign.tutsplus.com/c/ecommerce' class='global-nav__mobile-third-level-heading-link' data-action='click->global-nav#sendNewNavDataLayerEvent'> <span class='global-nav__mobile-third-level-heading-link-text'> View all eCommerce </span> <span class='global-nav__mobile-third-level-heading-link-icon'> <i class='fa fa-angle-right'></i> </span> </a> </section> <div class='global-nav__mobile-second-level-links-title empty-title'></div> <ul class='global-nav__mobile-third-level-links'> <li class='global-nav__mobile-third-level-link-item' test-nav-item-name='Shopify'> <a href='https://webdesign.tutsplus.com/c/ecommerce/s/shopify' class='global-nav__mobile-third-level-link' data-action='click->global-nav#sendNewNavDataLayerEvent'> <span class='global-nav__mobile-third-level-link-title'> Shopify </span> </a> </li> <li class='global-nav__mobile-third-level-link-item' test-nav-item-name='WooCommerce'> <a href='https://webdesign.tutsplus.com/c/ecommerce/s/woocommerce' class='global-nav__mobile-third-level-link' data-action='click->global-nav#sendNewNavDataLayerEvent'> <span class='global-nav__mobile-third-level-link-title'> WooCommerce </span> </a> </li> <li class='global-nav__mobile-third-level-link-item' test-nav-item-name='BigCommerce'> <a href='https://webdesign.tutsplus.com/c/ecommerce/s/bigcommerce' class='global-nav__mobile-third-level-link' data-action='click->global-nav#sendNewNavDataLayerEvent'> <span class='global-nav__mobile-third-level-link-title'> BigCommerce </span> </a> </li> <li class='global-nav__mobile-third-level-link-item' test-nav-item-name='Magento'> <a href='https://webdesign.tutsplus.com/c/ecommerce/s/magento' class='global-nav__mobile-third-level-link' data-action='click->global-nav#sendNewNavDataLayerEvent'> <span class='global-nav__mobile-third-level-link-title'> Magento </span> </a> </li> </ul> </div> </div> </li> </ul> <div class='global-nav__mobile-second-level-links-title '> popular software in Web Design </div> <ul class='global-nav__mobile-second-level-links'> <li class='global-nav__mobile-second-level-link-item' test-nav-item-name='Sketch'> <a href='https://webdesign.tutsplus.com/compatible-with/sketch' class='global-nav__mobile-second-level-link' data-action='click->global-nav#sendNewNavDataLayerEvent'> <img class='global-nav__mobile-popular-software-icon' src='https://static.tutsplus.com/packs/static/images/popular_software/webdesign/sketch@2x-06b2d1b0b5e67fbd7a46.png' loading='lazy'> <span class='global-nav__mobile-second-level-link-title'> Sketch </span> </a> </li> <li class='global-nav__mobile-second-level-link-item' test-nav-item-name='Figma'> <a href='https://webdesign.tutsplus.com/compatible-with/figma' class='global-nav__mobile-second-level-link' data-action='click->global-nav#sendNewNavDataLayerEvent'> <img class='global-nav__mobile-popular-software-icon' src='https://static.tutsplus.com/packs/static/images/popular_software/webdesign/figma@2x-9b6b6b30267a5cb7e475.png' loading='lazy'> <span class='global-nav__mobile-second-level-link-title'> Figma </span> </a> </li> <li class='global-nav__mobile-second-level-link-item' test-nav-item-name='Adobe XD'> <a href='https://webdesign.tutsplus.com/compatible-with/adobe-xd' class='global-nav__mobile-second-level-link' data-action='click->global-nav#sendNewNavDataLayerEvent'> <img class='global-nav__mobile-popular-software-icon' src='https://static.tutsplus.com/packs/static/images/popular_software/webdesign/xd@2x-727778ad5bc8388de2c8.png' loading='lazy'> <span class='global-nav__mobile-second-level-link-title'> Adobe XD </span> </a> </li> </ul> </div> </div> </li> <li class='global-nav__mobile-top-level-item' test-nav-item-name='Code'> <a href='https://code.tutsplus.com' class='global-nav__mobile-top-level-link global-nav__mobile-top-level-link-new-nav' data-action=''> <span class='global-nav__mobile-top-level-link-title'> Code </span> </a> </li> <li class='global-nav__mobile-top-level-item' test-nav-item-name='Music'> <a href='https://music.tutsplus.com' class='global-nav__mobile-top-level-link global-nav__mobile-top-level-link-new-nav' data-action=''> <span class='global-nav__mobile-top-level-link-title'> Music </span> </a> </li> </ul> <hr class="global-nav__mobile-divider" /><ul class="global-nav-mobile__envato-links new-nav-mobile"><li class="global-nav__mobile-top-level-item"><turbo-frame id="user_mobile_session_info" loading="lazy" src="/user_mobile_session?show_greeting=false"><a data-turbo="false" class="global-nav__mobile-user-link" href="https://tutsplus.com/sign_in?redirect_to=https%3A%2F%2Fwebdesign.tutsplus.com%2Fhow-to-animate-css-grid-layouts-image-grid-project--cms-108937t">Sign In</a></turbo-frame></li><li class="global-nav__mobile-top-level-item"><a class="global-mobile__header-item--envato-link font-family-polysan-regular" data-action="click->global-nav#sendNewNavDataLayerEvent" href="https://www.youtube.com/channel/UC8lxnUR_CzruT2KA6cb7p0Q">Tuts+ YouTube</a></li><li class="global-nav__mobile-top-level-item"><a class="global-mobile__header-item--envato-link" data-action="click->global-nav#sendNewNavDataLayerEvent" href="https://elements.envato.com">Envato</a></li></ul></div><div class="global-new-nav__header"><div class="global-new-nav__header-content"><div class="global-new-nav__header-top"><div class="global-new-nav__header-right"><ul class="global-new-nav__header-list"><li class="global-new-nav__header-item"><a class="global-nav__header-item--envato-link leading-5 font-family-polysan-regular" data-action="click->ga-analytics#sendElementsClickEvent" href="https://elements.envato.com?utm_campaign=elements_tuts-header_nav&utm_medium=promos&utm_source=tutsplus">Envato Elements</a></li><li class="global-new-nav__header-item global-new-nav__header-divider">|</li><li class="global-new-nav__header-item"><a class="global-nav__header-item--envato-link leading-5 font-family-polysan-regular" data-action="click->global-nav#sendNewNavDataLayerEvent" href="https://www.youtube.com/channel/UC8lxnUR_CzruT2KA6cb7p0Q?utm_campaign=elements_tuts-header_nav&utm_medium=promos&utm_source=tutsplus">Tuts+ YouTube</a></li><li class="global-new-nav__header-item global-new-nav__header-divider">|</li><li class="global-new-nav__header-item"><turbo-frame id="user_session_info" loading="lazy" src="/user_session"><a data-turbo="false" class="global-new-nav__user-link font-bold leading-5 font-family-polysan-regular-bulky" rel="nofollow" href="https://tutsplus.com/sign_in?redirect_to=https%3A%2F%2Fwebdesign.tutsplus.com%2Fhow-to-animate-css-grid-layouts-image-grid-project--cms-108937t">Sign In</a></turbo-frame></li></ul></div></div><div class="global-new-nav__header-bottom"><ul class="global-nav__header-list" data-controller="subcategories-nav"><li class="global-nav__header-item global-nav__header-item-tuts-logo"><a class="global-nav__header-tuts-logo-link" data-action="click->global-nav#sendNewNavDataLayerEvent" href="https://tutsplus.com/"><img alt="envato-tuts+" class="global-nav__header-tuts-logo-image new-nav-mobile" src="https://static.tutsplus.com/packs/static/images/envato-tutsplus-dark-da1bf6c5a7fd83433e94.png" /></a></li> <li class='global-nav__header-item font-semibold leading-5 !px-2 !pb-[5px] font-family-polysan-regular-median '> <a href='https://design.tutsplus.com' class='global-new-nav__header-link global-nav__header-link--primary !font-semibold' data-action='click->global-nav#sendNewNavDataLayerEvent focusin->subcategories-nav#hideAllSubCategoriesMenuWrappers'> <span>Design</span> </a> </li> <li class='global-nav__header-item font-semibold leading-5 !px-2 !pb-[5px] font-family-polysan-regular-median '> <a href='https://business.tutsplus.com' class='global-new-nav__header-link global-nav__header-link--primary !font-semibold' data-action='click->global-nav#sendNewNavDataLayerEvent focusin->subcategories-nav#hideAllSubCategoriesMenuWrappers'> <span>Business</span> </a> </li> <li class='global-nav__header-item font-semibold leading-5 !px-2 !pb-[5px] font-family-polysan-regular-median '> <a href='https://photography.tutsplus.com/photo' class='global-new-nav__header-link global-nav__header-link--primary !font-semibold' data-action='click->global-nav#sendNewNavDataLayerEvent focusin->subcategories-nav#hideAllSubCategoriesMenuWrappers'> <span>Photo</span> </a> </li> <li class='global-nav__header-item font-semibold leading-5 !px-2 !pb-[5px] font-family-polysan-regular-median '> <a href='https://photography.tutsplus.com/video' class='global-new-nav__header-link global-nav__header-link--primary !font-semibold' data-action='click->global-nav#sendNewNavDataLayerEvent focusin->subcategories-nav#hideAllSubCategoriesMenuWrappers'> <span>Video</span> </a> </li> <li class='global-nav__header-item font-semibold leading-5 !px-2 !pb-[5px] font-family-polysan-regular-median global-nav__top-level-item--expanded'> <a href='https://webdesign.tutsplus.com' class='global-new-nav__header-link global-nav__header-link--primary !font-semibold' data-action='click->global-nav#sendNewNavDataLayerEvent focusin->subcategories-nav#hideAllSubCategoriesMenuWrappers'> <span>Web Design</span> </a> <div class='global-new-nav__header-second-level'> <ul class='global-nav__header-second-level-list'> <li class='global-nav__header-item ' data-action='mouseenter->subcategories-nav#show mouseleave->subcategories-nav#hide click->subcategories-nav#show' test-nav-item-name="Software"> <div class='global-new-nav__header-link global-nav__header-link--primary !font-semibold' data-action='click->global-nav#sendNewNavDataLayerEvent'> <span class='global-new-nav__header-link-text'>Software</span> <i class='fa fa-chevron-down'></i> </div> <div class='global-new-nav__header-third-level'> <div class='global-new-nav__header-third-level-sub-categories'> <ul class='global-new-nav__header-third-level-links display-flex'> <ul> <li> <div class='global-new-nav__header-third-level-links-title'> Start Learning </div> </li> <li class='global-new-nav__header-third-level-link-item' test-nav-item-name='Sketch'> <a href='https://webdesign.tutsplus.com/compatible-with/sketch' class='global-new-nav__header-third-level-link' data-action='click->global-nav#sendNewNavDataLayerEvent'> <img class='global-new-nav__header-popular-software-icon' src='https://static.tutsplus.com/packs/static/images/popular_software/webdesign/sketch@2x-06b2d1b0b5e67fbd7a46.png' loading='lazy'> <span class='global-new-nav__header-third-level-link-title'> Sketch </span> </a> </li> <li class='global-new-nav__header-third-level-link-item' test-nav-item-name='Figma'> <a href='https://webdesign.tutsplus.com/compatible-with/figma' class='global-new-nav__header-third-level-link' data-action='click->global-nav#sendNewNavDataLayerEvent'> <img class='global-new-nav__header-popular-software-icon' src='https://static.tutsplus.com/packs/static/images/popular_software/webdesign/figma@2x-9b6b6b30267a5cb7e475.png' loading='lazy'> <span class='global-new-nav__header-third-level-link-title'> Figma </span> </a> </li> <li class='global-new-nav__header-third-level-link-item' test-nav-item-name='Adobe XD'> <a href='https://webdesign.tutsplus.com/compatible-with/adobe-xd' class='global-new-nav__header-third-level-link' data-action='click->global-nav#sendNewNavDataLayerEvent'> <img class='global-new-nav__header-popular-software-icon' src='https://static.tutsplus.com/packs/static/images/popular_software/webdesign/xd@2x-727778ad5bc8388de2c8.png' loading='lazy'> <span class='global-new-nav__header-third-level-link-title'> Adobe XD </span> </a> </li> <li class='global-new-nav__header-third-level-link-item' test-nav-item-name='Sublime Text'> <a href='https://webdesign.tutsplus.com/compatible-with/sublime-text' class='global-new-nav__header-third-level-link' data-action='click->global-nav#sendNewNavDataLayerEvent'> <img class='global-new-nav__header-popular-software-icon' src='https://static.tutsplus.com/packs/static/images/popular_software/webdesign/sublime@2x-ffbddc90d1c534b42d83.png' loading='lazy'> <span class='global-new-nav__header-third-level-link-title'> Sublime Text </span> </a> </li> <li class='global-new-nav__header-third-level-link-item' test-nav-item-name='Visual Studio Code'> <a href='https://webdesign.tutsplus.com/compatible-with/visual-studio-code' class='global-new-nav__header-third-level-link' data-action='click->global-nav#sendNewNavDataLayerEvent'> <img class='global-new-nav__header-popular-software-icon' src='https://static.tutsplus.com/packs/static/images/popular_software/webdesign/vscode@2x-3da3dc440f7877aa3715.png' loading='lazy'> <span class='global-new-nav__header-third-level-link-title'> Visual Studio Code </span> </a> </li> <li class='global-new-nav__header-third-level-link-item' test-nav-item-name='MailChimp'> <a href='https://webdesign.tutsplus.com/compatible-with/mailchimp' class='global-new-nav__header-third-level-link' data-action='click->global-nav#sendNewNavDataLayerEvent'> <img class='global-new-nav__header-popular-software-icon' src='https://static.tutsplus.com/packs/static/images/popular_software/webdesign/mailchimp@2x-12ec7ec155f7365c14a0.png' loading='lazy'> <span class='global-new-nav__header-third-level-link-title'> MailChimp </span> </a> </li> <li class='global-new-nav__header-third-level-link-item' test-nav-item-name='Webflow'> <a href='https://webdesign.tutsplus.com/compatible-with/webflow' class='global-new-nav__header-third-level-link' data-action='click->global-nav#sendNewNavDataLayerEvent'> <img class='global-new-nav__header-popular-software-icon' src='https://static.tutsplus.com/packs/static/images/popular_software/webdesign/webflow@2x-c488c71766a27a4ca131.png' loading='lazy'> <span class='global-new-nav__header-third-level-link-title'> Webflow </span> </a> </li> <li class='global-new-nav__header-third-level-link-item' test-nav-item-name='Campaign Monitor'> <a href='https://webdesign.tutsplus.com/compatible-with/campaign-monitor' class='global-new-nav__header-third-level-link' data-action='click->global-nav#sendNewNavDataLayerEvent'> <img class='global-new-nav__header-popular-software-icon' src='https://static.tutsplus.com/packs/static/images/popular_software/webdesign/campaign_monitor@2x-097a4d858a7583260178.png' loading='lazy'> <span class='global-new-nav__header-third-level-link-title'> Campaign Monitor </span> </a> </li> <li class='global-new-nav__header-third-level-link-item' test-nav-item-name='AI Tools'> <a href='https://webdesign.tutsplus.com/compatible-with/ai-tools' class='global-new-nav__header-third-level-link' data-action='click->global-nav#sendNewNavDataLayerEvent'> <img class='global-new-nav__header-popular-software-icon' src='https://static.tutsplus.com/packs/static/images/popular_software/webdesign/ai_tools@2x-829ddec496349c126fb9.png' loading='lazy'> <span class='global-new-nav__header-third-level-link-title'> AI Tools </span> </a> </li> </ul> </ul> </div> </div> </li> <li class='global-nav__header-item ' data-action='mouseenter->subcategories-nav#show mouseleave->subcategories-nav#hide click->subcategories-nav#show' test-nav-item-name='WordPress'> <a href='https://webdesign.tutsplus.com/c/wordpress' class='global-new-nav__header-link global-nav__header-link--primary' data-action='click->global-nav#sendNewNavDataLayerEvent'> <span class='global-new-nav__header-link-text'> WordPress </span> <i class='fa fa-chevron-down'></i> </a> <div class='global-new-nav__header-third-level'> <div class='global-new-nav__header-third-level-sub-categories'> <ul class='global-new-nav__header-third-level-links display-flex'> <ul> <li> <div class='global-new-nav__header-third-level-links-title'> Start Learning </div> </li> <li class='global-new-nav__header-third-level-link-item' test-nav-item-name='WordPress CMS'> <a href='https://webdesign.tutsplus.com/c/wordpress/s/wordpress-cms' class='global-new-nav__header-third-level-link' data-action='click->global-nav#sendNewNavDataLayerEvent'> <span class='global-new-nav__header-third-level-link-title'> WordPress CMS </span> </a> </li> <li class='global-new-nav__header-third-level-link-item' test-nav-item-name='WordPress Themes'> <a href='https://webdesign.tutsplus.com/c/wordpress/s/wordpress-themes' class='global-new-nav__header-third-level-link' data-action='click->global-nav#sendNewNavDataLayerEvent'> <span class='global-new-nav__header-third-level-link-title'> WordPress Themes </span> </a> </li> <li class='global-new-nav__header-third-level-link-item' test-nav-item-name='WordPress Plugins'> <a href='https://webdesign.tutsplus.com/c/wordpress/s/wordpress-plugins' class='global-new-nav__header-third-level-link' data-action='click->global-nav#sendNewNavDataLayerEvent'> <span class='global-new-nav__header-third-level-link-title'> WordPress Plugins </span> </a> </li> <li class='global-new-nav__header-third-level-link-item' test-nav-item-name='WordPress Hosting'> <a href='https://webdesign.tutsplus.com/c/wordpress/s/wordpress-hosting' class='global-new-nav__header-third-level-link' data-action='click->global-nav#sendNewNavDataLayerEvent'> <span class='global-new-nav__header-third-level-link-title'> WordPress Hosting </span> </a> </li> <li class='global-new-nav__header-third-level-link-item' test-nav-item-name='Elementor'> <a href='https://webdesign.tutsplus.com/c/wordpress/s/elementor' class='global-new-nav__header-third-level-link' data-action='click->global-nav#sendNewNavDataLayerEvent'> <span class='global-new-nav__header-third-level-link-title'> Elementor </span> </a> </li> </ul> </ul> <a href='https://webdesign.tutsplus.com/c/wordpress' class='global-new-nav__header-third-level-heading-link' data-action='click->global-nav#sendNewNavDataLayerEvent'> <span class='global-new-nav__header-third-level-heading-link-text'> All WordPress </span> <span class='global-new-nav__header-third-level-heading-link-icon'> <i class='fa fa-arrow-right'></i> </span> </a> </div> </div> </li> <li class='global-nav__header-item active-category ' data-action='mouseenter->subcategories-nav#show mouseleave->subcategories-nav#hide click->subcategories-nav#show' test-nav-item-name='HTML/CSS'> <a href='https://webdesign.tutsplus.com/c/htmlcss' class='global-new-nav__header-link global-nav__header-link--primary' data-action='click->global-nav#sendNewNavDataLayerEvent'> <span class='global-new-nav__header-link-text'> HTML/CSS </span> <i class='fa fa-chevron-down'></i> </a> <div class='global-new-nav__header-third-level'> <div class='global-new-nav__header-third-level-sub-categories'> <ul class='global-new-nav__header-third-level-links display-flex'> <ul> <li> <div class='global-new-nav__header-third-level-links-title'> Start Learning </div> </li> <li class='global-new-nav__header-third-level-link-item' test-nav-item-name='HTML'> <a href='https://webdesign.tutsplus.com/c/htmlcss/s/html' class='global-new-nav__header-third-level-link' data-action='click->global-nav#sendNewNavDataLayerEvent'> <span class='global-new-nav__header-third-level-link-title'> HTML </span> </a> </li> <li class='global-new-nav__header-third-level-link-item' test-nav-item-name='CSS'> <a href='https://webdesign.tutsplus.com/c/htmlcss/s/css' class='global-new-nav__header-third-level-link' data-action='click->global-nav#sendNewNavDataLayerEvent'> <span class='global-new-nav__header-third-level-link-title'> CSS </span> </a> </li> <li class='global-new-nav__header-third-level-link-item' test-nav-item-name='JavaScript for Designers'> <a href='https://webdesign.tutsplus.com/c/htmlcss/s/javascript-for-designers' class='global-new-nav__header-third-level-link' data-action='click->global-nav#sendNewNavDataLayerEvent'> <span class='global-new-nav__header-third-level-link-title'> JavaScript for Designers </span> </a> </li> <li class='global-new-nav__header-third-level-link-item' test-nav-item-name='Bootstrap'> <a href='https://webdesign.tutsplus.com/c/htmlcss/s/bootstrap' class='global-new-nav__header-third-level-link' data-action='click->global-nav#sendNewNavDataLayerEvent'> <span class='global-new-nav__header-third-level-link-title'> Bootstrap </span> </a> </li> <li class='global-new-nav__header-third-level-link-item' test-nav-item-name='Animation'> <a href='https://webdesign.tutsplus.com/c/htmlcss/s/animation' class='global-new-nav__header-third-level-link' data-action='click->global-nav#sendNewNavDataLayerEvent'> <span class='global-new-nav__header-third-level-link-title'> Animation </span> </a> </li> <li class='global-new-nav__header-third-level-link-item' test-nav-item-name='HTML Templates'> <a href='https://webdesign.tutsplus.com/c/htmlcss/s/html-templates' class='global-new-nav__header-third-level-link' data-action='click->global-nav#sendNewNavDataLayerEvent'> <span class='global-new-nav__header-third-level-link-title'> HTML Templates </span> </a> </li> <li class='global-new-nav__header-third-level-link-item' test-nav-item-name='Landing Pages'> <a href='https://webdesign.tutsplus.com/c/htmlcss/s/landing-pages' class='global-new-nav__header-third-level-link' data-action='click->global-nav#sendNewNavDataLayerEvent'> <span class='global-new-nav__header-third-level-link-title'> Landing Pages </span> </a> </li> <li class='global-new-nav__header-third-level-link-item' test-nav-item-name='SVG'> <a href='https://webdesign.tutsplus.com/c/htmlcss/s/svg' class='global-new-nav__header-third-level-link' data-action='click->global-nav#sendNewNavDataLayerEvent'> <span class='global-new-nav__header-third-level-link-title'> SVG </span> </a> </li> </ul> </ul> <a href='https://webdesign.tutsplus.com/c/htmlcss' class='global-new-nav__header-third-level-heading-link' data-action='click->global-nav#sendNewNavDataLayerEvent'> <span class='global-new-nav__header-third-level-heading-link-text'> All HTML/CSS </span> <span class='global-new-nav__header-third-level-heading-link-icon'> <i class='fa fa-arrow-right'></i> </span> </a> </div> </div> </li> <li class='global-nav__header-item ' data-action='mouseenter->subcategories-nav#show mouseleave->subcategories-nav#hide click->subcategories-nav#show' test-nav-item-name='Email'> <a href='https://webdesign.tutsplus.com/c/email' class='global-new-nav__header-link global-nav__header-link--primary' data-action='click->global-nav#sendNewNavDataLayerEvent'> <span class='global-new-nav__header-link-text'> Email </span> <i class='fa fa-chevron-down'></i> </a> <div class='global-new-nav__header-third-level'> <div class='global-new-nav__header-third-level-sub-categories'> <ul class='global-new-nav__header-third-level-links display-flex'> <ul> <li> <div class='global-new-nav__header-third-level-links-title'> Start Learning </div> </li> <li class='global-new-nav__header-third-level-link-item' test-nav-item-name='Email Design'> <a href='https://webdesign.tutsplus.com/c/email/s/email-design' class='global-new-nav__header-third-level-link' data-action='click->global-nav#sendNewNavDataLayerEvent'> <span class='global-new-nav__header-third-level-link-title'> Email Design </span> </a> </li> <li class='global-new-nav__header-third-level-link-item' test-nav-item-name='Email Templates'> <a href='https://webdesign.tutsplus.com/c/email/s/email-templates' class='global-new-nav__header-third-level-link' data-action='click->global-nav#sendNewNavDataLayerEvent'> <span class='global-new-nav__header-third-level-link-title'> Email Templates </span> </a> </li> <li class='global-new-nav__header-third-level-link-item' test-nav-item-name='Email Marketing'> <a href='https://webdesign.tutsplus.com/c/email/s/email-marketing' class='global-new-nav__header-third-level-link' data-action='click->global-nav#sendNewNavDataLayerEvent'> <span class='global-new-nav__header-third-level-link-title'> Email Marketing </span> </a> </li> </ul> </ul> <a href='https://webdesign.tutsplus.com/c/email' class='global-new-nav__header-third-level-heading-link' data-action='click->global-nav#sendNewNavDataLayerEvent'> <span class='global-new-nav__header-third-level-heading-link-text'> All Email </span> <span class='global-new-nav__header-third-level-heading-link-icon'> <i class='fa fa-arrow-right'></i> </span> </a> </div> <div class='global-new-nav__header-third-level-popular-softwares'> <ul class='global-new-nav__header-third-level-links'> <li> <div class='global-new-nav__header-third-level-links-title'>popular software</div> </li> <li class='global-new-nav__header-third-level-link-item' test-nav-item-name='Campaign Monitor'> <a href='https://webdesign.tutsplus.com/c/email/compatible-with/campaign-monitor' class='global-new-nav__header-third-level-link' data-action='click->global-nav#sendNewNavDataLayerEvent'> <img class='global-new-nav__header-popular-software-icon' src='https://static.tutsplus.com/packs/static/images/popular_software/webdesign/campaign_monitor@2x-097a4d858a7583260178.png' loading='lazy'> <span class='global-new-nav__header-third-level-link-title'> Campaign Monitor </span> </a> </li> <li class='global-new-nav__header-third-level-link-item' test-nav-item-name='MailChimp'> <a href='https://webdesign.tutsplus.com/c/email/compatible-with/mailchimp' class='global-new-nav__header-third-level-link' data-action='click->global-nav#sendNewNavDataLayerEvent'> <img class='global-new-nav__header-popular-software-icon' src='https://static.tutsplus.com/packs/static/images/popular_software/webdesign/mailchimp@2x-12ec7ec155f7365c14a0.png' loading='lazy'> <span class='global-new-nav__header-third-level-link-title'> MailChimp </span> </a> </li> </ul> </div> </div> </li> <li class='global-nav__header-item ' data-action='mouseenter->subcategories-nav#show mouseleave->subcategories-nav#hide click->subcategories-nav#show' test-nav-item-name='UX/UI'> <a href='https://webdesign.tutsplus.com/c/uxui' class='global-new-nav__header-link global-nav__header-link--primary' data-action='click->global-nav#sendNewNavDataLayerEvent'> <span class='global-new-nav__header-link-text'> UX/UI </span> <i class='fa fa-chevron-down'></i> </a> <div class='global-new-nav__header-third-level'> <div class='global-new-nav__header-third-level-sub-categories'> <ul class='global-new-nav__header-third-level-links display-flex'> <ul> <li> <div class='global-new-nav__header-third-level-links-title'> Learn UI Design </div> </li> <li class='global-new-nav__header-third-level-link-item' test-nav-item-name='Forms'> <a href='https://webdesign.tutsplus.com/c/uxui/s/forms' class='global-new-nav__header-third-level-link' data-action='click->global-nav#sendNewNavDataLayerEvent'> <span class='global-new-nav__header-third-level-link-title'> Forms </span> </a> </li> <li class='global-new-nav__header-third-level-link-item' test-nav-item-name='Icon Design'> <a href='https://webdesign.tutsplus.com/c/uxui/s/icon-design' class='global-new-nav__header-third-level-link' data-action='click->global-nav#sendNewNavDataLayerEvent'> <span class='global-new-nav__header-third-level-link-title'> Icon Design </span> </a> </li> <li class='global-new-nav__header-third-level-link-item' test-nav-item-name='Navigation'> <a href='https://webdesign.tutsplus.com/c/uxui/s/navigation' class='global-new-nav__header-third-level-link' data-action='click->global-nav#sendNewNavDataLayerEvent'> <span class='global-new-nav__header-third-level-link-title'> Navigation </span> </a> </li> <li class='global-new-nav__header-third-level-link-item' test-nav-item-name='Prototyping'> <a href='https://webdesign.tutsplus.com/c/uxui/s/prototyping' class='global-new-nav__header-third-level-link' data-action='click->global-nav#sendNewNavDataLayerEvent'> <span class='global-new-nav__header-third-level-link-title'> Prototyping </span> </a> </li> <li class='global-new-nav__header-third-level-link-item' test-nav-item-name='Wireframing'> <a href='https://webdesign.tutsplus.com/c/uxui/s/wireframing' class='global-new-nav__header-third-level-link' data-action='click->global-nav#sendNewNavDataLayerEvent'> <span class='global-new-nav__header-third-level-link-title'> Wireframing </span> </a> </li> <li class='global-new-nav__header-third-level-link-item' test-nav-item-name='Web Typography'> <a href='https://webdesign.tutsplus.com/c/uxui/s/web-typography' class='global-new-nav__header-third-level-link' data-action='click->global-nav#sendNewNavDataLayerEvent'> <span class='global-new-nav__header-third-level-link-title'> Web Typography </span> </a> </li> <li class='global-new-nav__header-third-level-link-item' test-nav-item-name='Material Design'> <a href='https://webdesign.tutsplus.com/c/uxui/s/material-design' class='global-new-nav__header-third-level-link' data-action='click->global-nav#sendNewNavDataLayerEvent'> <span class='global-new-nav__header-third-level-link-title'> Material Design </span> </a> </li> <li class='global-new-nav__header-third-level-link-item' test-nav-item-name='Design Theory'> <a href='https://webdesign.tutsplus.com/c/uxui/s/design-theory' class='global-new-nav__header-third-level-link' data-action='click->global-nav#sendNewNavDataLayerEvent'> <span class='global-new-nav__header-third-level-link-title'> Design Theory </span> </a> </li> <li class='global-new-nav__header-third-level-link-item' test-nav-item-name='Design Systems'> <a href='https://webdesign.tutsplus.com/c/uxui/s/design-systems' class='global-new-nav__header-third-level-link' data-action='click->global-nav#sendNewNavDataLayerEvent'> <span class='global-new-nav__header-third-level-link-title'> Design Systems </span> </a> </li> <li class='global-new-nav__header-third-level-link-item'> <a href='https://webdesign.tutsplus.com/c/uxui/s/ui-design' class='global-new-nav__header-third-level-heading-link' data-action='click->global-nav#sendNewNavDataLayerEvent'> <span class='global-new-nav__header-third-level-heading-link-text'> All UI Design </span> <span class='global-new-nav__header-third-level-heading-link-icon'> <i class='fa fa-arrow-right'></i> </span> </a> </li> </ul> <ul> <li> <div class='global-new-nav__header-third-level-links-title'> Learn UX Design </div> </li> <li class='global-new-nav__header-third-level-link-item' test-nav-item-name='User Research'> <a href='https://webdesign.tutsplus.com/c/uxui/s/user-research' class='global-new-nav__header-third-level-link' data-action='click->global-nav#sendNewNavDataLayerEvent'> <span class='global-new-nav__header-third-level-link-title'> User Research </span> </a> </li> <li class='global-new-nav__header-third-level-link-item' test-nav-item-name='User Testing'> <a href='https://webdesign.tutsplus.com/c/uxui/s/user-testing' class='global-new-nav__header-third-level-link' data-action='click->global-nav#sendNewNavDataLayerEvent'> <span class='global-new-nav__header-third-level-link-title'> User Testing </span> </a> </li> <li class='global-new-nav__header-third-level-link-item' test-nav-item-name='Responsive Design'> <a href='https://webdesign.tutsplus.com/c/uxui/s/responsive-design' class='global-new-nav__header-third-level-link' data-action='click->global-nav#sendNewNavDataLayerEvent'> <span class='global-new-nav__header-third-level-link-title'> Responsive Design </span> </a> </li> <li class='global-new-nav__header-third-level-link-item' test-nav-item-name='Usability'> <a href='https://webdesign.tutsplus.com/c/uxui/s/usability' class='global-new-nav__header-third-level-link' data-action='click->global-nav#sendNewNavDataLayerEvent'> <span class='global-new-nav__header-third-level-link-title'> Usability </span> </a> </li> <li class='global-new-nav__header-third-level-link-item' test-nav-item-name='Accessibility'> <a href='https://webdesign.tutsplus.com/c/uxui/s/accessibility' class='global-new-nav__header-third-level-link' data-action='click->global-nav#sendNewNavDataLayerEvent'> <span class='global-new-nav__header-third-level-link-title'> Accessibility </span> </a> </li> <li class='global-new-nav__header-third-level-link-item'> <a href='https://webdesign.tutsplus.com/c/uxui/s/ux-design' class='global-new-nav__header-third-level-heading-link' data-action='click->global-nav#sendNewNavDataLayerEvent'> <span class='global-new-nav__header-third-level-heading-link-text'> All UX Design </span> <span class='global-new-nav__header-third-level-heading-link-icon'> <i class='fa fa-arrow-right'></i> </span> </a> </li> </ul> </ul> </div> <div class='global-new-nav__header-third-level-popular-softwares'> <ul class='global-new-nav__header-third-level-links'> <li> <div class='global-new-nav__header-third-level-links-title'>popular software</div> </li> <li class='global-new-nav__header-third-level-link-item' test-nav-item-name='Sketch'> <a href='https://webdesign.tutsplus.com/c/uxui/compatible-with/sketch' class='global-new-nav__header-third-level-link' data-action='click->global-nav#sendNewNavDataLayerEvent'> <img class='global-new-nav__header-popular-software-icon' src='https://static.tutsplus.com/packs/static/images/popular_software/webdesign/sketch@2x-06b2d1b0b5e67fbd7a46.png' loading='lazy'> <span class='global-new-nav__header-third-level-link-title'> Sketch </span> </a> </li> <li class='global-new-nav__header-third-level-link-item' test-nav-item-name='Figma'> <a href='https://webdesign.tutsplus.com/c/uxui/compatible-with/figma' class='global-new-nav__header-third-level-link' data-action='click->global-nav#sendNewNavDataLayerEvent'> <img class='global-new-nav__header-popular-software-icon' src='https://static.tutsplus.com/packs/static/images/popular_software/webdesign/figma@2x-9b6b6b30267a5cb7e475.png' loading='lazy'> <span class='global-new-nav__header-third-level-link-title'> Figma </span> </a> </li> <li class='global-new-nav__header-third-level-link-item' test-nav-item-name='Adobe XD'> <a href='https://webdesign.tutsplus.com/c/uxui/compatible-with/adobe-xd' class='global-new-nav__header-third-level-link' data-action='click->global-nav#sendNewNavDataLayerEvent'> <img class='global-new-nav__header-popular-software-icon' src='https://static.tutsplus.com/packs/static/images/popular_software/webdesign/xd@2x-727778ad5bc8388de2c8.png' loading='lazy'> <span class='global-new-nav__header-third-level-link-title'> Adobe XD </span> </a> </li> <li class='global-new-nav__header-third-level-link-item' test-nav-item-name='Webflow'> <a href='https://webdesign.tutsplus.com/c/uxui/compatible-with/webflow' class='global-new-nav__header-third-level-link' data-action='click->global-nav#sendNewNavDataLayerEvent'> <img class='global-new-nav__header-popular-software-icon' src='https://static.tutsplus.com/packs/static/images/popular_software/webdesign/webflow@2x-c488c71766a27a4ca131.png' loading='lazy'> <span class='global-new-nav__header-third-level-link-title'> Webflow </span> </a> </li> </ul> </div> </div> </li> <li class='global-nav__header-item ' data-action='mouseenter->subcategories-nav#show mouseleave->subcategories-nav#hide click->subcategories-nav#show' test-nav-item-name='SEO'> <a href='https://webdesign.tutsplus.com/c/seo' class='global-new-nav__header-link global-nav__header-link--primary' data-action='click->global-nav#sendNewNavDataLayerEvent'> <span class='global-new-nav__header-link-text'> SEO </span> <i class='fa fa-chevron-down'></i> </a> <div class='global-new-nav__header-third-level'> <div class='global-new-nav__header-third-level-sub-categories'> <ul class='global-new-nav__header-third-level-links display-flex'> <ul> <li> <div class='global-new-nav__header-third-level-links-title'> Start Learning </div> </li> <li class='global-new-nav__header-third-level-link-item' test-nav-item-name='Content Strategy'> <a href='https://webdesign.tutsplus.com/c/seo/s/content-strategy' class='global-new-nav__header-third-level-link' data-action='click->global-nav#sendNewNavDataLayerEvent'> <span class='global-new-nav__header-third-level-link-title'> Content Strategy </span> </a> </li> <li class='global-new-nav__header-third-level-link-item' test-nav-item-name='Conversion'> <a href='https://webdesign.tutsplus.com/c/seo/s/conversion' class='global-new-nav__header-third-level-link' data-action='click->global-nav#sendNewNavDataLayerEvent'> <span class='global-new-nav__header-third-level-link-title'> Conversion </span> </a> </li> <li class='global-new-nav__header-third-level-link-item' test-nav-item-name='Performance'> <a href='https://webdesign.tutsplus.com/c/seo/s/performance' class='global-new-nav__header-third-level-link' data-action='click->global-nav#sendNewNavDataLayerEvent'> <span class='global-new-nav__header-third-level-link-title'> Performance </span> </a> </li> </ul> </ul> <a href='https://webdesign.tutsplus.com/c/seo' class='global-new-nav__header-third-level-heading-link' data-action='click->global-nav#sendNewNavDataLayerEvent'> <span class='global-new-nav__header-third-level-heading-link-text'> All SEO </span> <span class='global-new-nav__header-third-level-heading-link-icon'> <i class='fa fa-arrow-right'></i> </span> </a> </div> </div> </li> <li class='global-nav__header-item ' data-action='mouseenter->subcategories-nav#show mouseleave->subcategories-nav#hide click->subcategories-nav#show' test-nav-item-name='eCommerce'> <a href='https://webdesign.tutsplus.com/c/ecommerce' class='global-new-nav__header-link global-nav__header-link--primary' data-action='click->global-nav#sendNewNavDataLayerEvent'> <span class='global-new-nav__header-link-text'> eCommerce </span> <i class='fa fa-chevron-down'></i> </a> <div class='global-new-nav__header-third-level'> <div class='global-new-nav__header-third-level-sub-categories'> <ul class='global-new-nav__header-third-level-links display-flex'> <ul> <li> <div class='global-new-nav__header-third-level-links-title'> Start Learning </div> </li> <li class='global-new-nav__header-third-level-link-item' test-nav-item-name='Shopify'> <a href='https://webdesign.tutsplus.com/c/ecommerce/s/shopify' class='global-new-nav__header-third-level-link' data-action='click->global-nav#sendNewNavDataLayerEvent'> <span class='global-new-nav__header-third-level-link-title'> Shopify </span> </a> </li> <li class='global-new-nav__header-third-level-link-item' test-nav-item-name='WooCommerce'> <a href='https://webdesign.tutsplus.com/c/ecommerce/s/woocommerce' class='global-new-nav__header-third-level-link' data-action='click->global-nav#sendNewNavDataLayerEvent'> <span class='global-new-nav__header-third-level-link-title'> WooCommerce </span> </a> </li> <li class='global-new-nav__header-third-level-link-item' test-nav-item-name='BigCommerce'> <a href='https://webdesign.tutsplus.com/c/ecommerce/s/bigcommerce' class='global-new-nav__header-third-level-link' data-action='click->global-nav#sendNewNavDataLayerEvent'> <span class='global-new-nav__header-third-level-link-title'> BigCommerce </span> </a> </li> <li class='global-new-nav__header-third-level-link-item' test-nav-item-name='Magento'> <a href='https://webdesign.tutsplus.com/c/ecommerce/s/magento' class='global-new-nav__header-third-level-link' data-action='click->global-nav#sendNewNavDataLayerEvent'> <span class='global-new-nav__header-third-level-link-title'> Magento </span> </a> </li> </ul> </ul> <a href='https://webdesign.tutsplus.com/c/ecommerce' class='global-new-nav__header-third-level-heading-link' data-action='click->global-nav#sendNewNavDataLayerEvent'> <span class='global-new-nav__header-third-level-heading-link-text'> All eCommerce </span> <span class='global-new-nav__header-third-level-heading-link-icon'> <i class='fa fa-arrow-right'></i> </span> </a> </div> </div> </li> </ul> </div> </li> <li class='global-nav__header-item font-semibold leading-5 !px-2 !pb-[5px] font-family-polysan-regular-median '> <a href='https://code.tutsplus.com' class='global-new-nav__header-link global-nav__header-link--primary !font-semibold' data-action='click->global-nav#sendNewNavDataLayerEvent focusin->subcategories-nav#hideAllSubCategoriesMenuWrappers'> <span>Code</span> </a> </li> <li class='global-nav__header-item font-semibold leading-5 !px-2 !pb-[5px] font-family-polysan-regular-median '> <a href='https://music.tutsplus.com' class='global-new-nav__header-link global-nav__header-link--primary !font-semibold' data-action='click->global-nav#sendNewNavDataLayerEvent focusin->subcategories-nav#hideAllSubCategoriesMenuWrappers'> <span>Music</span> </a> </li> </ul><div class="global-new-nav__header-right" data-controller="global-search"><form class="global-nav__search-form nonmobile" data-turbo="false" data-action="submit->global-nav#sendSearchDataLayerEvent submit->global-search#perform_search" action="https://webdesign.tutsplus.com/t/tutorials/search" accept-charset="UTF-8" method="get"><input type="text" name="search[terms]" id="search_terms" value="" placeholder="Search tutorials, courses and resources" class="placeholder:leading-5 global-nav__search-terms !font-family-polysan-regular search-terms-nonmobile" data-action="keydown->global-search#keydown input->global-search#auto_suggestions focus->global-search#focus_in" /> <div class="search__auto_suggestions_container " data-global-search-target="suggestionContainer" data-action="mousedown->global-search#onSuggestionContainerMousedown" > <div class="search__auto_suggestions_content"> <div class="search__auto_suggesstion_list_container"> <div class="search__auto_suggesstion_list_content"> <ul class="search__auto_suggesstion_list" role="listbox" data-global-search-target="suggestionList"> </ul> </div> </div> </div> </div><button name="button" type="submit" class="global-nav__search-button" aria-label="Search"><i class="fa fa-search"></i></button></form></div></div></div></div></nav><div class="empty-sticky-nav-background-div" style="height: 207px"></div><div class="page-content topic-webdesign " id="page-content"><main class="content" style="background-color: transparent;"><div class="content-banner"><div class="content-banner-restricted-width full_width_post"><ol class="content-banner__content-breadcrumb topic-webdesign content-banner__content-breadcrumb-with-primary-category" data-controller="breadcrumbs-component" data-analytics-context="breadcrumbs"> <li class='breadcrumbs-link-item__home-icon'> <a href="https://tutsplus.com/" > <img alt="envato-tuts+" src="https://static.tutsplus.com/packs/static/images/home-67b42eb75817c9594bed.svg" /> </a> </li> <li class='breadcrumbs-link-item__home'> <a href="https://tutsplus.com/" > Home </a> </li> <li> <a href="https://webdesign.tutsplus.com" > Web Design </a> </li> <li> <a href="https://webdesign.tutsplus.com/c/htmlcss" > HTML/CSS </a> </li> <li> <a href="https://webdesign.tutsplus.com/c/htmlcss/s/css" > CSS </a> </li> </ol> <div class="content-banner__content"><div class="content-banner__body"><h1 class="content-banner__title font-family-polysan-regular-median">How to animate CSS Grid layouts (image grid project)</h1><div class="content-banner__summary">Let me teach you how to animate the CSS Grid properties by building a responsive image grid with hover effects.</div></div></div></div></div><div class="content-title"></div><input type="hidden" name="registrations_post_languages" id="registrations_post_languages" value="en" autocomplete="off" /><input type="hidden" name="registrations_primary_category_name" id="registrations_primary_category_name" value="HTML/CSS" autocomplete="off" /><input type="hidden" name="registrations_primary_subcategory_name" id="registrations_primary_subcategory_name" value="CSS" autocomplete="off" /><input type="hidden" name="registrations_content_type" id="registrations_content_type" value="Tutorial" autocomplete="off" /><article class="post article view full_width_post " data-action="count-headings@window->post-promotion-placement#checkSidebarAdDisplayCondition" data-auto-insert-signup-is-enable-value="true" data-controller="inline-toc-analytics scroll-position sticky-ad post-promotion-placement auto-insert-signup"><div class='post-on-scroll-floating-buttons-group__container' data-controller='sticky-block' data-scroll-height-definer='.post-body__content' data-sticky-block-target='stickyElement' data-sticky-bottom='true'> <a href="#page-body" class="scroll-to-target" data-controller="scroll-to-target-tracking" data-action="click->scroll-to-target-tracking#onClick" data-label="Scroll to top" data-target-selector="#page-body"> <span class="scroll-to-target__btn-label">Scroll to top</span> <i class="fa fa-chevron-down scroll-to-target__btn-icon"></i> </a> </div> <div class="post__inarticle-ad-template is-hidden" data-placement-tag="" data-promotion-placement="5"><turbo-frame id="publift_lazy_article_mid_1" loading="lazy" src="/promotions/publift_promotion?position=article_mid_1&variation=in-article"><div class="avert fuse-ad avert--in-article"><div class="avert__wrapper"><div class="avert__content"></div><div class="avert__label">Advertisement</div></div></div></turbo-frame></div><div class="post__inarticle-ad-template is-hidden" data-placement-tag="" data-promotion-placement="8"><turbo-frame id="publift_lazy_article_mid_2" loading="lazy" src="/promotions/publift_promotion?position=article_mid_2&variation=in-article"><div class="avert fuse-ad avert--in-article"><div class="avert__wrapper"><div class="avert__content"></div><div class="avert__label">Advertisement</div></div></div></turbo-frame></div><div class="post__inarticle-ad-template-mobile is-hidden" data-placement-tag="" data-promotion-placement="3"><turbo-frame id="publift_lazy_mob_article_top" loading="lazy" src="/promotions/publift_promotion?position=mob_article_top&variation=in-article"><div class="avert fuse-ad avert--in-article"><div class="avert__wrapper"><div class="avert__content"></div><div class="avert__label">Advertisement</div></div></div></turbo-frame></div><div class="post__inarticle-ad-template-mobile is-hidden" data-placement-tag="" data-promotion-placement="8"><turbo-frame id="publift_lazy_mob_article_1" loading="lazy" src="/promotions/publift_promotion?position=mob_article_1&variation=in-article"><div class="avert fuse-ad avert--in-article"><div class="avert__wrapper"><div class="avert__content"></div><div class="avert__label">Advertisement</div></div></div></turbo-frame></div><div class="post__inarticle-ad-template-mobile is-hidden" data-placement-tag="" data-promotion-placement="11"><turbo-frame id="publift_lazy_mob_article_2" loading="lazy" src="/promotions/publift_promotion?position=mob_article_2&variation=in-article"><div class="avert fuse-ad avert--in-article"><div class="avert__wrapper"><div class="avert__content"></div><div class="avert__label">Advertisement</div></div></div></turbo-frame></div><div class="layout__content-with-sidebar"><div class="content-heading"><div><div class='content-heading__author-bio-and-meta-info'> <div class='content-heading__author-bio'> <img class="content-author__image" alt="George Martsoukos" width="40" height="40" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=80/uploads/users/780/profiles/19309/profileImage/george-web-avatar-400x400.png 2x" loading="lazy" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=40/uploads/users/780/profiles/19309/profileImage/george-web-avatar-400x400.png" /> <div class='content-heading__author-name-publish-date-and-read-time'> <span class='content-heading__author-name'> <a rel="author" aria-label="Author: George Martsoukos" href="https://tutsplus.com/authors/george-martsoukos">George Martsoukos</a> </span> <div class='content-heading__publish-date-and-read-time'> <time datetime="2024-09-30T07:37:55Z" title="Sep 30, 2024"> Sep 30, 2024 </time> <span class='content-heading__separator'>•</span> 5 min read </div> </div> </div> <div class="content-heading__meta-info"> <div class="languges-and-sharing-component"> <div data-controller="share-icon" class='content-heading__social_share'> <div class="share-icon" > <a class="social-link facebook" href="https://www.facebook.com/sharer/sharer.php?u=https://webdesign.tutsplus.com/how-to-animate-css-grid-layouts-image-grid-project--cms-108937t" target="_blank"> <svg class="social-icon social-icon-fb" width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"> <path d="M7.69921 19.3126V12.956H5.73572V10.0349H7.69921V8.77635C7.69921 5.52236 9.16588 4.01445 12.3484 4.01445C12.6667 4.01445 13.1064 4.0479 13.5135 4.09649C13.8185 4.12799 14.121 4.17988 14.4191 4.25182V6.90042C14.2467 6.88429 14.0739 6.87473 13.9008 6.87175C13.7069 6.8667 13.513 6.86431 13.3191 6.86458C12.7579 6.86458 12.3198 6.94105 11.9897 7.11072C11.7677 7.22249 11.5811 7.39404 11.4508 7.60619C11.246 7.94075 11.154 8.39878 11.154 9.00178V10.0349H14.2643L13.9579 11.7101L13.7302 12.956H11.154V19.5237C15.8698 18.9518 19.5238 14.9219 19.5238 10.0349C19.5238 4.75605 15.2595 0.476074 10 0.476074C4.74048 0.476074 0.476196 4.75605 0.476196 10.0349C0.476196 14.518 3.5508 18.2794 7.69921 19.3126Z"/> </svg> </a> </div> <div class="share-icon"> <a class="social-link" href=https://www.linkedin.com/shareArticle?mini=true&url=https://webdesign.tutsplus.com/how-to-animate-css-grid-layouts-image-grid-project--cms-108937t&title=How%20to%20animate%20CSS%20Grid%20layouts%20%28image%20grid%20project%29&summary=In%20this%20tutorial%2C%20we%27ll%20learn%20how%20to%20animate%20the%20CSS%20Grid%20properties%20by%20building%20a%20responsive%20image%20grid%20with%20hover%20effects. target="_blank"> <svg class="social-icon social-icon-linkedin" width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"> <path d="M19.5227 19.5237H15.5809V13.3374C15.5809 11.8622 15.551 9.96378 13.5269 9.96378C11.4717 9.96378 11.1579 11.5689 11.1579 13.2285V19.5237H7.21614V6.80232H11.0026V8.53635H11.0536C11.5827 7.53659 12.8692 6.48129 14.7913 6.48129C18.7851 6.48129 19.5238 9.11399 19.5238 12.5409L19.5227 19.5237ZM2.76423 5.06163C1.49542 5.06163 0.476166 4.03299 0.476166 2.76774C0.476166 1.5036 1.49653 0.476074 2.76423 0.476074C4.0286 0.476074 5.05341 1.5036 5.05341 2.76774C5.05341 4.03299 4.02749 5.06163 2.76423 5.06163ZM4.74064 19.5237H0.787822V6.80232H4.74064V19.5237Z"/> </svg> </a> </div> <div class="share-icon"> <a class="social-link" href="https://www.pinterest.com/pin/create/button/?url=https://webdesign.tutsplus.com/how-to-animate-css-grid-layouts-image-grid-project--cms-108937t&description=In%20this%20tutorial%2C%20we%27ll%20learn%20how%20to%20animate%20the%20CSS%20Grid%20properties%20by%20building%20a%20responsive%20image%20grid%20with%20hover%20effects." target="_blank"> <div class="icon"> <svg class="social-icon social-icon-pinterest" width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"> <path d="M10.014 0.476074C4.74628 0.476074 0.476257 4.7356 0.476257 9.98957C0.476257 14.0205 2.98878 17.4634 6.53719 18.8483C6.45365 18.0951 6.37886 16.9412 6.56981 16.1189C6.74405 15.3753 7.68843 11.3912 7.68843 11.3912C7.68843 11.3912 7.40281 10.8197 7.40281 9.97766C7.40281 8.65782 8.17216 7.66734 9.12768 7.66734C9.94239 7.66734 10.3354 8.27766 10.3354 9.00703C10.3354 9.82369 9.81588 11.0443 9.54617 12.1753C9.31943 13.1221 10.0235 13.8935 10.9584 13.8935C12.6514 13.8935 13.9562 12.1118 13.9562 9.53877C13.9562 7.26814 12.3149 5.67449 9.97182 5.67449C7.2588 5.67449 5.66839 7.70782 5.66839 9.80068C5.66839 10.6205 5.98186 11.5015 6.37568 11.9761C6.45445 12.0713 6.46479 12.1546 6.44331 12.2499C6.3717 12.5475 6.2102 13.2015 6.17758 13.3316C6.13541 13.5102 6.04073 13.5467 5.85854 13.4626C4.6691 12.915 3.92283 11.1785 3.92283 9.77528C3.92283 6.77846 6.10915 4.01973 10.224 4.01973C13.5322 4.01973 16.1052 6.37449 16.1052 9.51417C16.1052 12.7959 14.031 15.4364 11.1461 15.4364C10.1803 15.4364 9.27328 14.9372 8.95185 14.3419L8.35595 16.6023C8.14193 17.4316 7.55716 18.4689 7.16413 19.0991C8.05759 19.3729 8.9988 19.5237 9.98853 19.5237C15.2451 19.5237 19.5239 15.2658 19.5239 10.0102C19.5239 4.75385 15.2451 0.496709 9.98853 0.496709L10.014 0.476074Z"/> </svg> </div> </a> </div> <div class="share-icon"> <a class="social-link" href="https://x.com/intent/post?url=https://webdesign.tutsplus.com/how-to-animate-css-grid-layouts-image-grid-project--cms-108937t&text=How%20to%20animate%20CSS%20Grid%20layouts%20%28image%20grid%20project%29" target="_blank"> <svg class="social-icon social-icon-x" width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"> <path d="M15.477 0.428467H18.3977L12.0167 7.69085L19.5238 17.5713H13.6461L9.04289 11.5781L3.77464 17.5713H0.852417L7.67781 9.80318L0.476227 0.429257H6.50321L10.6643 5.90726L15.477 0.428467ZM14.4524 15.8312H16.0707L5.62385 2.07771H3.88734L14.4524 15.8312Z"/> </svg> </a> </div> <div class="share-icon"> <a class="social-link copy-button" href="javascript:void(0)" data-action="click->share-icon#copyDomain"> <svg class="social-icon social-icon-link" width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"> <path d="M17.9817 9.46401L15.1331 12.3126C14.6442 12.8015 14.0638 13.1894 13.4251 13.454C12.7863 13.7186 12.1016 13.8548 11.4102 13.8548C10.7188 13.8548 10.0341 13.7186 9.39535 13.454C8.75657 13.1894 8.17616 12.8015 7.68728 12.3126C7.56675 12.2123 7.46847 12.0879 7.39869 11.9475C7.32892 11.8071 7.28919 11.6536 7.28204 11.497C7.27489 11.3403 7.30047 11.1839 7.35716 11.0377C7.41386 10.8915 7.50041 10.7587 7.61129 10.6478C7.72218 10.5369 7.85496 10.4504 8.00117 10.3937C8.14738 10.337 8.30381 10.3114 8.46046 10.3185C8.61711 10.3257 8.77056 10.3654 8.91099 10.4352C9.05143 10.505 9.17578 10.6033 9.2761 10.7238C9.84289 11.2847 10.6081 11.5993 11.4055 11.5993C12.2029 11.5993 12.9681 11.2847 13.5349 10.7238L16.3835 7.87518C16.9483 7.31043 17.2655 6.54446 17.2655 5.74578C17.2655 4.9471 16.9483 4.18114 16.3835 3.61638C15.8188 3.05163 15.0528 2.73436 14.2541 2.73436C13.4554 2.73436 12.6895 3.05163 12.1247 3.61638L11.2222 4.52831C11.0102 4.74025 10.7228 4.85932 10.4231 4.85932C10.1233 4.85932 9.83589 4.74025 9.62395 4.52831C9.41201 4.31638 9.29295 4.02893 9.29295 3.7292C9.29295 3.42948 9.41201 3.14203 9.62395 2.93009L10.5359 2.01816C11.5233 1.03078 12.8624 0.476074 14.2588 0.476074C15.6552 0.476074 16.9943 1.03078 17.9817 2.01816C18.9691 3.00554 19.5238 4.34472 19.5238 5.74108C19.5238 7.13745 18.9691 8.47663 17.9817 9.46401ZM8.77783 15.4715L7.87531 16.3834C7.31055 16.9481 6.54459 17.2654 5.74591 17.2654C4.94723 17.2654 4.18126 16.9481 3.61651 16.3834C3.05175 15.8186 2.73448 15.0527 2.73448 14.254C2.73448 13.4553 3.05175 12.6893 3.61651 12.1246L6.46511 9.27598C7.03189 8.71507 7.7971 8.40044 8.59451 8.40044C9.39192 8.40044 10.1571 8.71507 10.7239 9.27598C10.9402 9.45602 11.216 9.54872 11.4971 9.53588C11.7782 9.52305 12.0444 9.40562 12.2434 9.20663C12.4424 9.00764 12.5598 8.74146 12.5726 8.46034C12.5855 8.17922 12.4928 7.90345 12.3127 7.68716C11.8245 7.1971 11.2443 6.80826 10.6054 6.54295C9.96654 6.27763 9.28158 6.14105 8.58981 6.14105C7.89804 6.14105 7.21307 6.27763 6.57421 6.54295C5.93534 6.80826 5.35514 7.1971 4.86688 7.68716L2.01828 10.5358C1.0309 11.5231 0.476196 12.8623 0.476196 14.2587C0.476196 15.6551 1.0309 16.9942 2.01828 17.9816C3.00566 18.969 4.34484 19.5237 5.74121 19.5237C7.13757 19.5237 8.47675 18.969 9.46413 17.9816L10.3761 17.0697C10.588 16.8577 10.7071 16.5703 10.7071 16.2706C10.7071 15.9708 10.588 15.6834 10.3761 15.4715C10.1641 15.2595 9.87667 15.1405 9.57695 15.1405C9.27722 15.1405 8.98977 15.2595 8.77783 15.4715Z"/> </svg> </a> <div id="toast">Copied to clipboard!</div> </div> </div> </div> </div> </div> </div><div class="content-heading__secondary"> <div class="content-heading__secondary-categories"> <a href="https://webdesign.tutsplus.com/c/htmlcss"> <span class="content-heading__secondary-categories-tag"> HTML/CSS </span> </a> <a href="https://webdesign.tutsplus.com/c/htmlcss/s/css"> <span class="content-heading__secondary-categories-tag"> CSS </span> </a> <a href="https://webdesign.tutsplus.com/c/uxui"> <span class="content-heading__secondary-categories-tag"> UX/UI </span> </a> </div> </div></div><div class="post-body view" data-controller="post-body animate-hash-anchors image-gallery" data-post-title="How to animate CSS Grid layouts (image grid project)"><div class="post-body__body"><div class="post-body__content"><style>* { box-sizing: border-box; } body {margin: 0;}*{box-sizing:border-box;}body{margin-top:0px;margin-right:0px;margin-bottom:0px;margin-left:0px;}</style><div data-content-block-type="Wysi" class="content-block content-block-wysi" id="i5os"> <p>That’s right—it turns out we can <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_animated_properties" target="_blank" rel="noopener">animate</a> some of the CSS Grid properties! Today, we’ll see this behavior in action by building a responsive image grid with hover effects. Taking this opportunity, we’ll also utilize the powerful <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/:has" target="_blank" rel="noopener">:has()</a> CSS selector.</p> <p>Let’s get started!</p> <h2 id="toc-yfc3-our-slider-project">Our Image Grid</h2> <p>Here’s what we're going to create—be sure to <a href="https://codepen.io/tutsplus/full/ZEgYaOO" target="_self" rel="">view the full screen demo on a large screen</a> (≥900px) and <span>hover over the cards</span>:</p> <p><iframe src="https://codepen.io/tutsplus/embed/ZEgYaOO?default-tab=result" width="850" height="600" frameborder="no" scrolling="no" allowfullscreen="true" loading="lazy"> </iframe></p> <h2 id="toc-6x67-the-markup"> <span class="sectionnum">1.</span> The Markup</h2> <p><span>We’ll start by placing six cards inside a container. We’ll wrap the first three and the last two within nested containers, as you can see from the markup below:</span></p> <div class="rouge-syntax-highlight"><table class="rouge-line-table html"><tbody> <tr id="line-1" class="lineno"> <td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>1</pre></td> <td class="rouge-code"><pre><span style="color: #f4bf75"><div</span> <span style="color: #6a9fb5">class=</span><span style="color: #90a959">"grid"</span><span style="color: #f4bf75">></span> </pre></td> </tr> <tr id="line-2" class="lineno"> <td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>2</pre></td> <td class="rouge-code"><pre> <span style="color: #f4bf75"><div</span> <span style="color: #6a9fb5">class=</span><span style="color: #90a959">"sub-grid sub-grid-1"</span><span style="color: #f4bf75">></span> </pre></td> </tr> <tr id="line-3" class="lineno"> <td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>3</pre></td> <td class="rouge-code"><pre> <span style="color: #f4bf75"><article</span> <span style="color: #6a9fb5">class=</span><span style="color: #90a959">"card"</span><span style="color: #f4bf75">></span>...<span style="color: #f4bf75"></article></span> </pre></td> </tr> <tr id="line-4" class="lineno"> <td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>4</pre></td> <td class="rouge-code"><pre> <span style="color: #f4bf75"><article</span> <span style="color: #6a9fb5">class=</span><span style="color: #90a959">"card"</span><span style="color: #f4bf75">></span>...<span style="color: #f4bf75"></article></span> </pre></td> </tr> <tr id="line-5" class="lineno"> <td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>5</pre></td> <td class="rouge-code"><pre> <span style="color: #f4bf75"><article</span> <span style="color: #6a9fb5">class=</span><span style="color: #90a959">"card"</span><span style="color: #f4bf75">></span>...<span style="color: #f4bf75"></article></span> </pre></td> </tr> <tr id="line-6" class="lineno"> <td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>6</pre></td> <td class="rouge-code"><pre> <span style="color: #f4bf75"></div></span> </pre></td> </tr> <tr id="line-7" class="lineno"> <td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>7</pre></td> <td class="rouge-code"><pre> <span style="color: #f4bf75"><article</span> <span style="color: #6a9fb5">class=</span><span style="color: #90a959">"card"</span><span style="color: #f4bf75">></span>...<span style="color: #f4bf75"></article></span> </pre></td> </tr> <tr id="line-8" class="lineno"> <td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>8</pre></td> <td class="rouge-code"><pre> <span style="color: #f4bf75"><div</span> <span style="color: #6a9fb5">class=</span><span style="color: #90a959">"sub-grid sub-grid-2"</span><span style="color: #f4bf75">></span> </pre></td> </tr> <tr id="line-9" class="lineno"> <td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>9</pre></td> <td class="rouge-code"><pre> <span style="color: #f4bf75"><article</span> <span style="color: #6a9fb5">class=</span><span style="color: #90a959">"card"</span><span style="color: #f4bf75">></span>...<span style="color: #f4bf75"></article></span> </pre></td> </tr> <tr id="line-10" class="lineno"> <td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>10</pre></td> <td class="rouge-code"><pre> <span style="color: #f4bf75"><article</span> <span style="color: #6a9fb5">class=</span><span style="color: #90a959">"card"</span><span style="color: #f4bf75">></span>...<span style="color: #f4bf75"></article></span> </pre></td> </tr> <tr id="line-11" class="lineno"> <td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>11</pre></td> <td class="rouge-code"><pre> <span style="color: #f4bf75"></div></span> </pre></td> </tr> <tr id="line-12" class="lineno"> <td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>12</pre></td> <td class="rouge-code"><pre><span style="color: #f4bf75"></div></span> </pre></td> </tr> </tbody></table></div> <p><span>Now, each card will have the following structure:</span></p> <div class="rouge-syntax-highlight"><table class="rouge-line-table html"><tbody> <tr id="line-1" class="lineno"> <td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>1</pre></td> <td class="rouge-code"><pre><span style="color: #f4bf75"><article</span> <span style="color: #6a9fb5">class=</span><span style="color: #90a959">"card"</span><span style="color: #f4bf75">></span> </pre></td> </tr> <tr id="line-2" class="lineno"> <td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>2</pre></td> <td class="rouge-code"><pre> <span style="color: #f4bf75"><figure></span> </pre></td> </tr> <tr id="line-3" class="lineno"> <td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>3</pre></td> <td class="rouge-code"><pre> <span style="color: #f4bf75"><img</span> <span style="color: #6a9fb5">width=</span><span style="color: #90a959">"IMG_WIDTH"</span> <span style="color: #6a9fb5">height=</span><span style="color: #90a959">"IMG_HEIGHT"</span> <span style="color: #6a9fb5">src=</span><span style="color: #90a959">"IMG_URL"</span> <span style="color: #6a9fb5">alt=</span><span style="color: #90a959">""</span><span style="color: #f4bf75">></span> </pre></td> </tr> <tr id="line-4" class="lineno"> <td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>4</pre></td> <td class="rouge-code"><pre> <span style="color: #f4bf75"><figcaption></span> </pre></td> </tr> <tr id="line-5" class="lineno"> <td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>5</pre></td> <td class="rouge-code"><pre> <span style="color: #f4bf75"><div></span> </pre></td> </tr> <tr id="line-6" class="lineno"> <td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>6</pre></td> <td class="rouge-code"><pre> ... </pre></td> </tr> <tr id="line-7" class="lineno"> <td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>7</pre></td> <td class="rouge-code"><pre> <span style="color: #f4bf75"><span></span> </pre></td> </tr> <tr id="line-8" class="lineno"> <td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>8</pre></td> <td class="rouge-code"><pre> by <span style="color: #f4bf75"><a</span> <span style="color: #6a9fb5">href=</span><span style="color: #90a959">"UNSPLASH_URL"</span> <span style="color: #6a9fb5">target=</span><span style="color: #90a959">"_blank"</span><span style="color: #f4bf75">></span>...<span style="color: #f4bf75"></a></span> </pre></td> </tr> <tr id="line-9" class="lineno"> <td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>9</pre></td> <td class="rouge-code"><pre> <span style="color: #f4bf75"></span></span> </pre></td> </tr> <tr id="line-10" class="lineno"> <td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>10</pre></td> <td class="rouge-code"><pre> <span style="color: #f4bf75"></div></span> </pre></td> </tr> <tr id="line-11" class="lineno"> <td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>11</pre></td> <td class="rouge-code"><pre> <span style="color: #f4bf75"></figcaption></span> </pre></td> </tr> <tr id="line-12" class="lineno"> <td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>12</pre></td> <td class="rouge-code"><pre> <span style="color: #f4bf75"></figure></span> </pre></td> </tr> <tr id="line-13" class="lineno"> <td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>13</pre></td> <td class="rouge-code"><pre><span style="color: #f4bf75"></article></span> </pre></td> </tr> </tbody></table></div> <h2 id="toc-ro6e-the-css"> <span class="sectionnum">2.</span> The Styles</h2> <p>On small screens (<900px), all cards will be stacked and their info will be visible.</p> <figure class="post_image"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/780/posts/108937/image-upload/mobile.jpg" alt="The mobile layout" loading="lazy" width="870px" height="770px" class="resized-image resized-image-desktop" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1700/uploads/users/780/posts/108937/image-upload/mobile.jpg 2x"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/780/posts/108937/image-upload/mobile.jpg" alt="The mobile layout" loading="lazy" width="650px" height="576px" class="resized-image resized-image-tablet" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/780/posts/108937/image-upload/mobile.jpg 2x"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/780/posts/108937/image-upload/mobile.jpg" alt="The mobile layout" loading="lazy" width="380px" height="338px" class="resized-image resized-image-mobile" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/780/posts/108937/image-upload/mobile.jpg 2x"></figure> <p>On larger screens, we’ll have a three-column layout.</p> <p>Here, there will be two scenarios that will be checked with the help of the <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/@media/hover" target="_self"><code>hover</code></a> media query:</p> <ul> <li>If we see the page from a device that doesn’t support hover, our gallery will look like this.</li> </ul> <figure class="post_image"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/780/posts/108937/image-upload/no_hover_desktop.jpg" alt="The desktop layout on devices that don't support hover." loading="lazy" width="870px" height="540px" class="resized-image resized-image-desktop" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1700/uploads/users/780/posts/108937/image-upload/no_hover_desktop.jpg 2x"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/780/posts/108937/image-upload/no_hover_desktop.jpg" alt="The desktop layout on devices that don't support hover." loading="lazy" width="650px" height="405px" class="resized-image resized-image-tablet" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/780/posts/108937/image-upload/no_hover_desktop.jpg 2x"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/780/posts/108937/image-upload/no_hover_desktop.jpg" alt="The desktop layout on devices that don't support hover." loading="lazy" width="380px" height="240px" class="resized-image resized-image-mobile" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/780/posts/108937/image-upload/no_hover_desktop.jpg 2x"></figure> <ul> <li>If we see the page from a desktop browser or a device with a hover, the gallery layout will change to this:</li> </ul> <figure class="post_image"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/780/posts/108937/image-upload/hover_desktop.jpg" alt="The desktop layout on devices that support hover." loading="lazy" width="870px" height="551px" class="resized-image resized-image-desktop" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1700/uploads/users/780/posts/108937/image-upload/hover_desktop.jpg 2x"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/780/posts/108937/image-upload/hover_desktop.jpg" alt="The desktop layout on devices that support hover." loading="lazy" width="650px" height="414px" class="resized-image resized-image-tablet" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/780/posts/108937/image-upload/hover_desktop.jpg 2x"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/780/posts/108937/image-upload/hover_desktop.jpg" alt="The desktop layout on devices that support hover." loading="lazy" width="380px" height="245px" class="resized-image resized-image-mobile" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/780/posts/108937/image-upload/hover_desktop.jpg 2x"></figure> <p>In that case, we’ll grayscale all cards and hide their details. When the user hovers a card, we’ll increase its size and show its info. More on that in a moment.</p> <h3 id="toc-0wqk-three-column-layout">Three-Column Layout</h3> <p>Let’s discuss our three-column layout a bit more thoroughly.</p> <figure class="post_image"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/780/posts/108937/image-upload/three_column_layout.jpg" alt="The three-column layout" loading="lazy" width="870px" height="551px" class="resized-image resized-image-desktop" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1700/uploads/users/780/posts/108937/image-upload/three_column_layout.jpg 2x"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/780/posts/108937/image-upload/three_column_layout.jpg" alt="The three-column layout" loading="lazy" width="650px" height="414px" class="resized-image resized-image-tablet" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/780/posts/108937/image-upload/three_column_layout.jpg 2x"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/780/posts/108937/image-upload/three_column_layout.jpg" alt="The three-column layout" loading="lazy" width="380px" height="245px" class="resized-image resized-image-mobile" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/780/posts/108937/image-upload/three_column_layout.jpg 2x"></figure> <ul> <li>We’ll set it up using CSS Grid.</li> <li>The first column will be twice the size of the other two.</li> <li>Inside the first column, we'll have a nested grid where the third column will be twice the size of the other two and sit below them. The rows’ height will be 40vh and customizable through the <code>--half-height</code> CSS variable.</li> <li>The height of the first column will be twice the height of the other two (80vh). Again, we can customize it through the <code>--height</code> CSS variable.</li> <li>Inside the third column, we’ll have a nested grid where the columns will be stacked, and the rows’ height will be also 40vh. </li> </ul> <p>Here are the related styles:</p> <div class="rouge-syntax-highlight"><table class="rouge-line-table css"><tbody> <tr id="line-1" class="lineno"> <td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>1</pre></td> <td class="rouge-code"><pre><span style="color: #d0d0d0;background-color: #151515">:root</span> <span style="color: #d0d0d0">{</span> </pre></td> </tr> <tr id="line-2" class="lineno"> <td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>2</pre></td> <td class="rouge-code"><pre> <span style="color: #d0d0d0;background-color: #151515">--height</span><span style="color: #d0d0d0">:</span> <span style="color: #90a959">80vh</span><span style="color: #d0d0d0">;</span> </pre></td> </tr> <tr id="line-3" class="lineno"> <td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>3</pre></td> <td class="rouge-code"><pre> <span style="color: #d0d0d0;background-color: #151515">--half-height</span><span style="color: #d0d0d0">:</span> <span style="color: #d0d0d0;background-color: #151515">calc</span><span style="color: #d0d0d0">(</span><span style="color: #d0d0d0;background-color: #151515">var</span><span style="color: #d0d0d0">(</span><span style="color: #d0d0d0;background-color: #151515">--height</span><span style="color: #d0d0d0">)</span> <span style="color: #d0d0d0">/</span> <span style="color: #90a959">2</span><span style="color: #d0d0d0">);</span> </pre></td> </tr> <tr id="line-4" class="lineno"> <td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>4</pre></td> <td class="rouge-code"><pre><span style="color: #d0d0d0">}</span> </pre></td> </tr> <tr id="line-5" class="lineno"> <td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>5</pre></td> <td class="rouge-code"><pre> </pre></td> </tr> <tr id="line-6" class="lineno"> <td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>6</pre></td> <td class="rouge-code"><pre><span style="color: #aa759f">@media</span> <span style="color: #d0d0d0">(</span><span style="color: #d0d0d0;background-color: #151515">min-width</span><span style="color: #d0d0d0">:</span> <span style="color: #90a959">900px</span><span style="color: #d0d0d0">)</span> <span style="color: #d0d0d0">{</span> </pre></td> </tr> <tr id="line-7" class="lineno"> <td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>7</pre></td> <td class="rouge-code"><pre> <span style="color: #f4bf75">.grid</span><span style="color: #d0d0d0">,</span> </pre></td> </tr> <tr id="line-8" class="lineno"> <td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>8</pre></td> <td class="rouge-code"><pre> <span style="color: #f4bf75">.sub-grid</span> <span style="color: #d0d0d0">{</span> </pre></td> </tr> <tr id="line-9" class="lineno"> <td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>9</pre></td> <td class="rouge-code"><pre> <span style="color: #d0d0d0;background-color: #151515">display</span><span style="color: #d0d0d0">:</span> <span style="color: #d0d0d0;background-color: #151515">grid</span><span style="color: #d0d0d0">;</span> </pre></td> </tr> <tr id="line-10" class="lineno"> <td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>10</pre></td> <td class="rouge-code"><pre> <span style="color: #d0d0d0">}</span> </pre></td> </tr> <tr id="line-11" class="lineno"> <td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>11</pre></td> <td class="rouge-code"><pre> </pre></td> </tr> <tr id="line-12" class="lineno"> <td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>12</pre></td> <td class="rouge-code"><pre> <span style="color: #f4bf75">.grid</span> <span style="color: #d0d0d0">{</span> </pre></td> </tr> <tr id="line-13" class="lineno"> <td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>13</pre></td> <td class="rouge-code"><pre> <span style="color: #d0d0d0;background-color: #151515">grid-template-columns</span><span style="color: #d0d0d0">:</span> <span style="color: #90a959">2</span><span style="color: #d0d0d0;background-color: #151515">fr</span> <span style="color: #90a959">1</span><span style="color: #d0d0d0;background-color: #151515">fr</span> <span style="color: #90a959">1</span><span style="color: #d0d0d0;background-color: #151515">fr</span><span style="color: #d0d0d0">;</span> </pre></td> </tr> <tr id="line-14" class="lineno"> <td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>14</pre></td> <td class="rouge-code"><pre> <span style="color: #d0d0d0">}</span> </pre></td> </tr> <tr id="line-15" class="lineno"> <td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>15</pre></td> <td class="rouge-code"><pre> </pre></td> </tr> <tr id="line-16" class="lineno"> <td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>16</pre></td> <td class="rouge-code"><pre> <span style="color: #f4bf75">.sub-grid</span> <span style="color: #d0d0d0">{</span> </pre></td> </tr> <tr id="line-17" class="lineno"> <td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>17</pre></td> <td class="rouge-code"><pre> <span style="color: #d0d0d0;background-color: #151515">grid-template-rows</span><span style="color: #d0d0d0">:</span> <span style="color: #d0d0d0;background-color: #151515">var</span><span style="color: #d0d0d0">(</span><span style="color: #d0d0d0;background-color: #151515">--half-height</span><span style="color: #d0d0d0">)</span> <span style="color: #d0d0d0;background-color: #151515">var</span><span style="color: #d0d0d0">(</span><span style="color: #d0d0d0;background-color: #151515">--half-height</span><span style="color: #d0d0d0">);</span> </pre></td> </tr> <tr id="line-18" class="lineno"> <td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>18</pre></td> <td class="rouge-code"><pre> <span style="color: #d0d0d0">}</span> </pre></td> </tr> <tr id="line-19" class="lineno"> <td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>19</pre></td> <td class="rouge-code"><pre> </pre></td> </tr> <tr id="line-20" class="lineno"> <td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>20</pre></td> <td class="rouge-code"><pre> <span style="color: #f4bf75">.sub-grid-1</span> <span style="color: #d0d0d0">{</span> </pre></td> </tr> <tr id="line-21" class="lineno"> <td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>21</pre></td> <td class="rouge-code"><pre> <span style="color: #d0d0d0;background-color: #151515">grid-template-columns</span><span style="color: #d0d0d0">:</span> <span style="color: #90a959">1</span><span style="color: #d0d0d0;background-color: #151515">fr</span> <span style="color: #90a959">1</span><span style="color: #d0d0d0;background-color: #151515">fr</span> <span style="color: #d0d0d0;background-color: #151515">auto</span><span style="color: #d0d0d0">;</span> </pre></td> </tr> <tr id="line-22" class="lineno"> <td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>22</pre></td> <td class="rouge-code"><pre> <span style="color: #d0d0d0">}</span> </pre></td> </tr> <tr id="line-23" class="lineno"> <td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>23</pre></td> <td class="rouge-code"><pre> </pre></td> </tr> <tr id="line-24" class="lineno"> <td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>24</pre></td> <td class="rouge-code"><pre> <span style="color: #f4bf75">.sub-grid-1</span> <span style="color: #f4bf75">.card</span><span style="color: #d0d0d0;background-color: #151515">:last-child</span> <span style="color: #d0d0d0">{</span> </pre></td> </tr> <tr id="line-25" class="lineno"> <td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>25</pre></td> <td class="rouge-code"><pre> <span style="color: #d0d0d0;background-color: #151515">grid-column</span><span style="color: #d0d0d0">:</span> <span style="color: #90a959">1</span><span style="color: #d0d0d0">/</span><span style="color: #90a959">-1</span><span style="color: #d0d0d0">;</span> </pre></td> </tr> <tr id="line-26" class="lineno"> <td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>26</pre></td> <td class="rouge-code"><pre> <span style="color: #d0d0d0">}</span> </pre></td> </tr> <tr id="line-27" class="lineno"> <td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>27</pre></td> <td class="rouge-code"><pre> </pre></td> </tr> <tr id="line-28" class="lineno"> <td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>28</pre></td> <td class="rouge-code"><pre> <span style="color: #949494">/*.sub-grid-2 { </span> </pre></td> </tr> <tr id="line-29" class="lineno"> <td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>29</pre></td> <td class="rouge-code"><pre><span style="color: #949494"> grid-template-columns: 1fr; </span> </pre></td> </tr> <tr id="line-30" class="lineno"> <td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>30</pre></td> <td class="rouge-code"><pre><span style="color: #949494"> }*/</span> </pre></td> </tr> <tr id="line-31" class="lineno"> <td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>31</pre></td> <td class="rouge-code"><pre><span style="color: #d0d0d0">}</span> </pre></td> </tr> </tbody></table></div> <h3 id="toc-ihp4-hover-effect">Hover Effect</h3> <p>Each time we hover a card/column, we’ll expand its width or height to produce a zoom effect. As we’ve used CSS Grid to structure the layout, we’ve to update the values of the <code>grid-template-rows</code> and <code>grid-template-columns</code> properties on hover.</p> <p>But, here’s the thing: these properties are set on the <strong>ancestor element</strong> and not on the card itself. Normally, we would use JavaScript to update them, but thankfully, the <code>:has()</code> relational selector makes it possible. </p> <h4 id="toc-i0vg-animation-1">Animation #1</h4> <p>Let’s see how this selector works in action.</p> <p>Consider the second column of our grid.</p> <figure class="post_image"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/780/posts/108937/image-upload/second_column.jpg" alt="The second column of our grid" loading="lazy" width="870px" height="770px" class="resized-image resized-image-desktop" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1700/uploads/users/780/posts/108937/image-upload/second_column.jpg 2x"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/780/posts/108937/image-upload/second_column.jpg" alt="The second column of our grid" loading="lazy" width="650px" height="576px" class="resized-image resized-image-tablet" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/780/posts/108937/image-upload/second_column.jpg 2x"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/780/posts/108937/image-upload/second_column.jpg" alt="The second column of our grid" loading="lazy" width="380px" height="338px" class="resized-image resized-image-mobile" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/780/posts/108937/image-upload/second_column.jpg 2x"></figure> <p>Initially, we have this rule:</p> <div class="rouge-syntax-highlight"><table class="rouge-line-table css"><tbody> <tr id="line-1" class="lineno"> <td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>1</pre></td> <td class="rouge-code"><pre><span style="color: #f4bf75">.grid</span> <span style="color: #d0d0d0">{</span> </pre></td> </tr> <tr id="line-2" class="lineno"> <td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>2</pre></td> <td class="rouge-code"><pre> <span style="color: #d0d0d0;background-color: #151515">grid-template-columns</span><span style="color: #d0d0d0">:</span> <span style="color: #90a959">2</span><span style="color: #d0d0d0;background-color: #151515">fr</span> <span style="color: #90a959">1</span><span style="color: #d0d0d0;background-color: #151515">fr</span> <span style="color: #90a959">1</span><span style="color: #d0d0d0;background-color: #151515">fr</span><span style="color: #d0d0d0">;</span> </pre></td> </tr> <tr id="line-3" class="lineno"> <td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>3</pre></td> <td class="rouge-code"><pre> <span style="color: #d0d0d0;background-color: #151515">transition</span><span style="color: #d0d0d0">:</span> <span style="color: #d0d0d0;background-color: #151515">all</span> <span style="color: #90a959">1s</span><span style="color: #d0d0d0">;</span> </pre></td> </tr> <tr id="line-4" class="lineno"> <td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>4</pre></td> <td class="rouge-code"><pre><span style="color: #d0d0d0">}</span> </pre></td> </tr> </tbody></table></div> <p>As soon as we hover over that card, it’ll expand to cover the whole grid width.</p> <figure class="post_image"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/780/posts/108937/image-upload/second_column_hover.jpg" alt="How the second column will look on hover" loading="lazy" width="870px" height="578px" class="resized-image resized-image-desktop" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1700/uploads/users/780/posts/108937/image-upload/second_column_hover.jpg 2x"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/780/posts/108937/image-upload/second_column_hover.jpg" alt="How the second column will look on hover" loading="lazy" width="650px" height="434px" class="resized-image resized-image-tablet" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/780/posts/108937/image-upload/second_column_hover.jpg 2x"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/780/posts/108937/image-upload/second_column_hover.jpg" alt="How the second column will look on hover" loading="lazy" width="380px" height="256px" class="resized-image resized-image-mobile" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/780/posts/108937/image-upload/second_column_hover.jpg 2x"></figure> <p>The CSS rule that will do the magic is this one:</p> <div class="rouge-syntax-highlight"><table class="rouge-line-table css"><tbody> <tr id="line-1" class="lineno"> <td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>1</pre></td> <td class="rouge-code"><pre><span style="color: #f4bf75">.grid</span><span style="color: #d0d0d0;background-color: #151515">:has</span><span style="color: #d0d0d0">(></span> <span style="color: #f4bf75">.card</span><span style="color: #d0d0d0;background-color: #151515">:hover</span><span style="color: #d0d0d0">)</span> <span style="color: #d0d0d0">{</span> </pre></td> </tr> <tr id="line-2" class="lineno"> <td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>2</pre></td> <td class="rouge-code"><pre> <span style="color: #d0d0d0;background-color: #151515">grid-template-columns</span><span style="color: #d0d0d0">:</span> <span style="color: #90a959">0</span><span style="color: #d0d0d0;background-color: #151515">fr</span> <span style="color: #90a959">1</span><span style="color: #d0d0d0;background-color: #151515">fr</span> <span style="color: #90a959">0</span><span style="color: #d0d0d0;background-color: #151515">fr</span><span style="color: #d0d0d0">;</span> </pre></td> </tr> <tr id="line-3" class="lineno"> <td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>3</pre></td> <td class="rouge-code"><pre><span style="color: #d0d0d0">}</span> </pre></td> </tr> </tbody></table></div> <p>The rule above will check if an immediate grid column is being hovered. If that condition is fulfilled, it’ll update the value of the <code>grid-template-columns</code> property so that the first and third columns become hidden while the first one expands to occupy their space. </p> <div class="callout-block"> <span class="callout-icon callout-tip"></span> <div class="callout-message">Use <code>0fr</code> instead of <code>0</code> to make the animation work!</div> </div> <h4 id="toc-i0vg-animation-1">Animation #2</h4> <p>Let’s see another example.</p> <p>Consider the first nested column of the first column.</p> <figure class="post_image"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/780/posts/108937/image-upload/first_column.jpg" alt="The first nested column of the first column." loading="lazy" width="870px" height="770px" class="resized-image resized-image-desktop" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1700/uploads/users/780/posts/108937/image-upload/first_column.jpg 2x"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/780/posts/108937/image-upload/first_column.jpg" alt="The first nested column of the first column." loading="lazy" width="650px" height="576px" class="resized-image resized-image-tablet" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/780/posts/108937/image-upload/first_column.jpg 2x"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/780/posts/108937/image-upload/first_column.jpg" alt="The first nested column of the first column." loading="lazy" width="380px" height="338px" class="resized-image resized-image-mobile" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/780/posts/108937/image-upload/first_column.jpg 2x"></figure> <p>Initially, we have this rule:</p> <div class="rouge-syntax-highlight"><table class="rouge-line-table css"><tbody> <tr id="line-1" class="lineno"> <td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>1</pre></td> <td class="rouge-code"><pre><span style="color: #f4bf75">.sub-grid-1</span> <span style="color: #d0d0d0">{</span> </pre></td> </tr> <tr id="line-2" class="lineno"> <td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>2</pre></td> <td class="rouge-code"><pre> <span style="color: #d0d0d0;background-color: #151515">grid-template-columns</span><span style="color: #d0d0d0">:</span> <span style="color: #90a959">1</span><span style="color: #d0d0d0;background-color: #151515">fr</span> <span style="color: #90a959">1</span><span style="color: #d0d0d0;background-color: #151515">fr</span> <span style="color: #d0d0d0;background-color: #151515">auto</span><span style="color: #d0d0d0">;</span> </pre></td> </tr> <tr id="line-3" class="lineno"> <td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>3</pre></td> <td class="rouge-code"><pre> <span style="color: #d0d0d0;background-color: #151515">transition</span><span style="color: #d0d0d0">:</span> <span style="color: #d0d0d0;background-color: #151515">all</span> <span style="color: #90a959">1s</span><span style="color: #d0d0d0">;</span> </pre></td> </tr> <tr id="line-4" class="lineno"> <td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>4</pre></td> <td class="rouge-code"><pre><span style="color: #d0d0d0">}</span> </pre></td> </tr> </tbody></table></div> <p>As soon as we hover over that card, it’ll double its size and hide the second card like this:</p> <figure class="post_image"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/780/posts/108937/image-upload/first_column_hover.jpg" alt="How the first nested column of the first column will look on hover" loading="lazy" width="870px" height="770px" class="resized-image resized-image-desktop" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1700/uploads/users/780/posts/108937/image-upload/first_column_hover.jpg 2x"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/780/posts/108937/image-upload/first_column_hover.jpg" alt="How the first nested column of the first column will look on hover" loading="lazy" width="650px" height="576px" class="resized-image resized-image-tablet" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/780/posts/108937/image-upload/first_column_hover.jpg 2x"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/780/posts/108937/image-upload/first_column_hover.jpg" alt="How the first nested column of the first column will look on hover" loading="lazy" width="380px" height="338px" class="resized-image resized-image-mobile" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/780/posts/108937/image-upload/first_column_hover.jpg 2x"></figure> <p>The CSS rule that will do the magic is this one:</p> <div class="rouge-syntax-highlight"><table class="rouge-line-table css"><tbody> <tr id="line-1" class="lineno"> <td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>1</pre></td> <td class="rouge-code"><pre><span style="color: #f4bf75">.grid</span><span style="color: #d0d0d0;background-color: #151515">:has</span><span style="color: #d0d0d0">(</span><span style="color: #f4bf75">.sub-grid-1</span> <span style="color: #f4bf75">.card</span><span style="color: #d0d0d0;background-color: #151515">:first-of-type:hover</span><span style="color: #d0d0d0">)</span> <span style="color: #f4bf75">.sub-grid-1</span> <span style="color: #d0d0d0">{</span> </pre></td> </tr> <tr id="line-2" class="lineno"> <td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>2</pre></td> <td class="rouge-code"><pre> <span style="color: #d0d0d0;background-color: #151515">grid-template-columns</span><span style="color: #d0d0d0">:</span> <span style="color: #90a959">1</span><span style="color: #d0d0d0;background-color: #151515">fr</span> <span style="color: #90a959">0</span><span style="color: #d0d0d0;background-color: #151515">fr</span> <span style="color: #d0d0d0;background-color: #151515">auto</span><span style="color: #d0d0d0">;</span> </pre></td> </tr> <tr id="line-3" class="lineno"> <td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>3</pre></td> <td class="rouge-code"><pre><span style="color: #d0d0d0">}</span> </pre></td> </tr> </tbody></table></div> <p>The rule above will check if the first nested column of the first grid column (which acts as a grid container) is being hovered. If that condition is fulfilled, it will update the value of the <code>grid-template-columns</code> property so that the second nested column becomes hidden while the first one expands to occupy its space. </p> <p>Use 0fr instead of 0 to make the animation work!</p> <h4 id="toc-i0vg-animation-1">Animation #3</h4> <p>Let’s finish with another example.</p> <p>Consider the first nested column of the third column.</p> <p><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/780/posts/108937/image-upload/third_column.jpg" alt="The first nested column of the third column." loading="lazy" width="870px" height="770px" class="resized-image resized-image-desktop" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1700/uploads/users/780/posts/108937/image-upload/third_column.jpg 2x"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/780/posts/108937/image-upload/third_column.jpg" alt="The first nested column of the third column." loading="lazy" width="650px" height="576px" class="resized-image resized-image-tablet" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/780/posts/108937/image-upload/third_column.jpg 2x"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/780/posts/108937/image-upload/third_column.jpg" alt="The first nested column of the third column." loading="lazy" width="380px" height="338px" class="resized-image resized-image-mobile" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/780/posts/108937/image-upload/third_column.jpg 2x"></p> <p>Initially, we have this rule:</p> <div class="rouge-syntax-highlight"><table class="rouge-line-table css"><tbody> <tr id="line-1" class="lineno"> <td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>1</pre></td> <td class="rouge-code"><pre><span style="color: #f4bf75">.sub-grid-2</span> <span style="color: #d0d0d0">{</span> </pre></td> </tr> <tr id="line-2" class="lineno"> <td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>2</pre></td> <td class="rouge-code"><pre> <span style="color: #d0d0d0;background-color: #151515">grid-template-rows</span><span style="color: #d0d0d0">:</span> <span style="color: #90a959">40vh</span> <span style="color: #90a959">40vh</span><span style="color: #d0d0d0">;</span> </pre></td> </tr> <tr id="line-3" class="lineno"> <td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>3</pre></td> <td class="rouge-code"><pre> <span style="color: #d0d0d0;background-color: #151515">transition</span><span style="color: #d0d0d0">:</span> <span style="color: #d0d0d0;background-color: #151515">all</span> <span style="color: #90a959">1s</span><span style="color: #d0d0d0">;</span> </pre></td> </tr> <tr id="line-4" class="lineno"> <td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>4</pre></td> <td class="rouge-code"><pre><span style="color: #d0d0d0">}</span> </pre></td> </tr> </tbody></table></div> <p>As soon as we hover over that card, it’ll double its height and hide the second card like this:</p> <figure class="post_image"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/780/posts/108937/image-upload/third_column_hover.jpg" alt="How the first nested column of the third column will look on hover" loading="lazy" width="870px" height="770px" class="resized-image resized-image-desktop" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1700/uploads/users/780/posts/108937/image-upload/third_column_hover.jpg 2x"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/780/posts/108937/image-upload/third_column_hover.jpg" alt="How the first nested column of the third column will look on hover" loading="lazy" width="650px" height="576px" class="resized-image resized-image-tablet" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/780/posts/108937/image-upload/third_column_hover.jpg 2x"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/780/posts/108937/image-upload/third_column_hover.jpg" alt="How the first nested column of the third column will look on hover" loading="lazy" width="380px" height="338px" class="resized-image resized-image-mobile" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/780/posts/108937/image-upload/third_column_hover.jpg 2x"></figure> <p>The CSS rule that will do the magic is this one:</p> <div class="rouge-syntax-highlight"><table class="rouge-line-table css"><tbody> <tr id="line-1" class="lineno"> <td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>1</pre></td> <td class="rouge-code"><pre><span style="color: #f4bf75">.grid</span><span style="color: #d0d0d0;background-color: #151515">:has</span><span style="color: #d0d0d0">(</span><span style="color: #f4bf75">.sub-grid-2</span> <span style="color: #f4bf75">.card</span><span style="color: #d0d0d0;background-color: #151515">:first-of-type:hover</span><span style="color: #d0d0d0">)</span> <span style="color: #f4bf75">.sub-grid-2</span> <span style="color: #d0d0d0">{</span> </pre></td> </tr> <tr id="line-2" class="lineno"> <td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>2</pre></td> <td class="rouge-code"><pre> <span style="color: #d0d0d0;background-color: #151515">grid-template-rows</span><span style="color: #d0d0d0">:</span> <span style="color: #90a959">80vh</span> <span style="color: #90a959">0</span><span style="color: #d0d0d0">;</span> </pre></td> </tr> <tr id="line-3" class="lineno"> <td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>3</pre></td> <td class="rouge-code"><pre><span style="color: #d0d0d0">}</span> </pre></td> </tr> </tbody></table></div> <p>The rule above will check if the first nested column of the third grid column (which acts as a grid container) is being hovered. If that condition is fulfilled, it will update the value of the <code>grid-template-rows</code> property so that the second nested column becomes hidden while the first one expands vertically to occupy its space. </p> <p>You can see the rest of the styles by clicking on the <strong>CSS</strong> tab of the demo—I’ve used <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_nesting/Using_CSS_nesting" target="_blank" rel="noopener">CSS nesting</a> for the card styles.</p> <h2 id="toc-3q3s-conclusion">Conclusion</h2> <p>Done! During this tutorial, we learned how to animate CSS Grid layouts with the help of the powerful <code>:has()</code> CSS pseudo-class. Hopefully, you enjoyed our project and gained some new knowledge.</p> <p>Again, here’s what we built today:</p> <p><iframe src="https://codepen.io/tutsplus/embed/ZEgYaOO?default-tab=result" width="850" height="600" frameborder="no" scrolling="no" allowfullscreen="true" loading="lazy"> </iframe></p> <p>As always, thanks a lot for reading!</p> </div></div></div></div><div class="post__article-ad-mobile"><turbo-frame id="publift_lazy_mob_article_3" loading="lazy" src="/promotions/publift_promotion?position=mob_article_3&variation=in-article"><div class="avert fuse-ad avert--in-article"><div class="avert__wrapper"><div class="avert__content"></div><div class="avert__label">Advertisement</div></div></div></turbo-frame></div><div class="content-heading content-heading__mobile"><div class="content-heading__secondary"> <div class="content-heading__secondary-categories"> <a href="https://webdesign.tutsplus.com/c/htmlcss"> <span class="content-heading__secondary-categories-tag"> HTML/CSS </span> </a> <a href="https://webdesign.tutsplus.com/c/htmlcss/s/css"> <span class="content-heading__secondary-categories-tag"> CSS </span> </a> <a href="https://webdesign.tutsplus.com/c/uxui"> <span class="content-heading__secondary-categories-tag"> UX/UI </span> </a> </div> </div></div> <div class='content-footer'> <div class='content-footer__content-meta-details'> <div class='content-footer__author-details'> <img class="content-footer__author-image" alt="George Martsoukos" width="64" height="64" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=128/uploads/users/780/profiles/19309/profileImage/george-web-avatar-400x400.png 2x" loading="lazy" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=64/uploads/users/780/profiles/19309/profileImage/george-web-avatar-400x400.png" /> <span>By</span> <span class='content-footer__author-name'> <a rel="author" aria-label="Author: George Martsoukos" href="https://tutsplus.com/authors/george-martsoukos">George Martsoukos</a> </span> </div> <div class='content-footer__additional-details'> <div class='content-footer__feedback-buttons-group' data-controller="post-vote" data-id=108937> <a class='content-footer__feedback-like-button' data-post-vote-target='likeButton' data-action='click->post-vote#like'> <span>Like</span> <div class='content-footer__feedback-icon-placeholder' data-post-vote-target='likeIcon'> <img alt="" src="https://static.tutsplus.com/packs/static/images/thumbs-up-e80969147d3487ef9dc5.svg" /> <img alt="" src="https://static.tutsplus.com/packs/static/images/thumbs-up-highlight-13174f0b8cbe2b523c3b.svg" /> </div> </a> <a class='content-footer__feedback-dislike-button' data-post-vote-target='dislikeButton' data-action='click->post-vote#dislike'> <div class='content-footer__feedback-icon-placeholder' data-post-vote-target='dislikeIcon'> <img alt="" src="https://static.tutsplus.com/packs/static/images/thumbs-down-401ae0d4ead12668516b.svg" /> <img alt="" src="https://static.tutsplus.com/packs/static/images/thumbs-down-highlight-1022d39c6062c9267b1d.svg" /> </div> </a> <input type="hidden" name="authenticity_token" id="authenticity_token" value="fGa2VXntL1maX1TmiVyKgwXkbAk8mwkZjhgRebh8Tsda_75Hy1aOqb23V-tv1QCLJ7D9VmxjuNUPQwAWzKCmIA" data-post-vote-target="token" autocomplete="off" /> </div> </div> </div> </div> </div></article></main></div><div class="cta-toast-popup" data-analytics-context-detail="cta toast"><turbo-frame id="cta_toast_popup" src="/cta_toast"></turbo-frame></div> <div id="footer-promo-component" class="w-full flex justify-center items-center bg-white pb-20 px-6 font-family-polysan-regular"> <a href="https://elements.envato.com/pricing" class="h-[343px] w-full lg:max-w-[960px] md:max-w-screen 2xl:max-w-[1290px] rounded-2xl overflow-hidden flex hover:cursor-default" data-action="click->ga-analytics#sendElementsClickEvent" > <div class="w-1/2 flex flex-col justify-center xsm:px-2 sm:px-8 md:px-16 lg:pr-48 gap-y-4 bg-[#9CEE69]"> <div class="text-3xl font-semibold text-black text-left">Let’s create something extraordinary</div> <div class="text-black hidden md:flex">Your one-stop creative asset destination</div> <div class="w-full flex justify-start"> <button class="bg-[#191919] text-white rounded-md xsm:px-1 xsm:py-0 sm:px-6 sm:py-2 hover:bg-gray-800 active:bg-gray-700 text-lg border-0 hover:cursor-pointer">Let’s create!</button> </div> </div> <div class="w-1/2"> <img class="w-full h-full object-cover" src="https://s3.amazonaws.com/cms-assets.tutsplus.com/uploads/users/2843/posts/109025/image-upload/Tuts_Homepage_Uplift_FooterBanner_645x343_v1_2_.png"> </div> </a> </div> <div class="ecosystem-highlight" data-analytics-context-detail="ecosystem highlight"><div class="ecosystem-highlight__cards"><div class="ecosystem-highlight__card"><a data-action="click->ga-analytics#sendElementsClickEvent" href="https://elements.envato.com?ec_unit=ecosystem_highlight&utm_campaign=elements_tuts-ecosystem-promo_&utm_medium=promos&utm_source=tutsplus"><img alt="" class="ecosystem-highlight__card-image" loading="lazy" src="https://static.tutsplus.com/packs/static/images/ecosystem/Elements-9c6156923682e0ca754a.png" /><div class="ecosystem-highlight__card-content"><div class="ecosystem-highlight__card-title">Unlimited Downloads<br />From $16.50/month</div><div class="ecosystem-highlight__card-description">Get access to over one million creative assets on Envato.</div></div></a></div><div class="ecosystem-highlight__card"><a data-action="click->ga-analytics#sendMarketClickEvent" href="https://themeforest.net?ec_unit=ecosystem_highlight&utm_campaign=elements_tuts-ecosystem-promo_&utm_medium=promos&utm_source=tutsplus"><img alt="" class="ecosystem-highlight__card-image" loading="lazy" src="https://static.tutsplus.com/packs/static/images/ecosystem/Market-b1c3dbb6b2a34956edf4.png" /><div class="ecosystem-highlight__card-content"><div class="ecosystem-highlight__card-title"> Over 9 Million Digital Assets</div><div class="ecosystem-highlight__card-description"> Everything you need for your next creative project.</div></div></a></div><div class="ecosystem-highlight__card"><a data-action="click->ga-analytics#sendPlaceitClickEvent" href="https://placeit.net?ec_unit=ecosystem_highlight&utm_campaign=placeit_mkt-footer&utm_content=tuts_global-footer&utm_medium=promos&utm_source=tutsplus.com"><img alt="" class="ecosystem-highlight__card-image" loading="lazy" src="https://static.tutsplus.com/packs/static/images/ecosystem/Placeit-2bfac81aff196db3c276.png" /><div class="ecosystem-highlight__card-content"><div class="ecosystem-highlight__card-title"> Create Beautiful Logos, Designs <br> & Mockups in Seconds</div><div class="ecosystem-highlight__card-description"> Design like a professional without Photoshop.</div></div></a></div><div class="ecosystem-highlight__card"><a href="https://community.envato.com?ec_unit=ecosystem_highlight&utm_campaign=elements_tuts-ecosystem-promo_&utm_medium=promos&utm_source=tutsplus"><img alt="" class="ecosystem-highlight__card-image" loading="lazy" src="https://static.tutsplus.com/packs/static/images/ecosystem/Community-4973bc700aa03754d91c.png" /><div class="ecosystem-highlight__card-content"><div class="ecosystem-highlight__card-title"> Join the Community</div><div class="ecosystem-highlight__card-description"> Share ideas. Host meetups. Lead discussions. Collaborate.</div></div></a></div></div></div><footer class="page-footer view" data-analytics-context="footer" data-controller="page-footer"><div class="page-footer__content"><div class="page-footer__links-column"><div class="page-footer__section page-footer__section--first"><div class="page-footer__heading">Envato Tuts+</div><a class="page-footer__links-column-expansion-link" data-action="click->page-footer#toggleFooterSection" href="javascript:void(0);"><span class="page-footer__links-column-expansion-link-expand-text"><i class="fa fa-plus page-footer__links-column-link-icon"></i></span><span class="page-footer__links-column-expansion-link-collapse-text"><i class="fa fa-minus page-footer__links-column-link-icon"></i></span></a><div class="page-footer__item"><a class="page-footer__link" href="https://tutsplus.com/about">About Envato Tuts+</a></div><div class="page-footer__item"><a class="page-footer__link" href="https://tutsplus.com/terms-of-use">Terms of Use</a></div><div class="page-footer__item"><a target="_blank" class="page-footer__link" href="https://www.envato.com/privacy">Privacy</a></div><div class="page-footer__item"><a target="_blank" class="page-footer__link" href="https://www.envato.com/cookies/">Cookies</a></div><div class="page-footer__item"><a class="page-footer__link" data-action="click->page-footer#openCookieSettings" href="javascript:void(0);">Cookie Settings</a></div><div class="page-footer__item"><a target="_blank" class="page-footer__link" href="https://www.envato.com/privacy/#my-personal-information">Do not sell or share my personal information</a></div></div></div><div class="page-footer__links-column"><div class="page-footer__section page-footer__section--first"><div class="page-footer__heading">Help</div><a class="page-footer__links-column-expansion-link" data-action="click->page-footer#toggleFooterSection" href="javascript:void(0);"><span class="page-footer__links-column-expansion-link-expand-text"><i class="fa fa-plus page-footer__links-column-link-icon"></i></span><span class="page-footer__links-column-expansion-link-collapse-text"><i class="fa fa-minus page-footer__links-column-link-icon"></i></span></a><div class="page-footer__item"><a class="page-footer__link" href="https://help.elements.envato.com/hc/en-us/categories/360000070683">FAQ</a></div><div class="page-footer__item"><a class="page-footer__link" href="https://help.elements.envato.com">Help Center</a></div></div></div><div class="page-footer__links-column page-footer__links-last-column"><div class="page-footer__brands-wrapper"><div class="page-footer__tuts-brand"><img loading="lazy" alt="envato-tuts+" class="page-footer__tuts-logo-image tuts-logo" src="https://static.tutsplus.com/packs/static/images/tuts_logo-73b941f1418b55c886ac.svg" /><div class="page-footer__counts"><div class="page-footer__count-item"><div class="page-footer__count-value">25,410</div><div class="page-footer__count-label">Tutorials</div></div><div class="page-footer__count-item"><div class="page-footer__count-value">553</div><div class="page-footer__count-label">Courses</div></div><div class="page-footer__count-item"><div class="page-footer__count-value">18,690</div><div class="page-footer__count-label">Translations</div></div></div></div><div class="page-footer__bcorp-brand"><a class="page-footer__bcorp-brand-link" href="https://www.bcorporation.net/en-us/find-a-b-corp/company/envato" rel="noopener" target="_blank"><img alt="B Corp logo" loading="lazy" src="https://static.tutsplus.com/packs/static/images/bcorp-bfc565be3a93741fc88c.svg" /></a></div></div></div></div><div class="page-footer__envato-bar"><div class="page-footer__envato-bar-content"><div class="page-footer__envato-bar-content-left-column"><ul class="page-footer__envato-bar-links"><li class="page-footer__envato-bar-link-item"><a class="page-footer__envato-bar-link" data-action="click->ga-analytics#sendElementsClickEvent" href="https://elements.envato.com">Envato</a></li><li class="page-footer__envato-bar-link-item"><a class="page-footer__envato-bar-link" data-action="click->ga-analytics#sendMarketClickEvent" href="https://market.envato.com">Envato Market</a></li><li class="page-footer__envato-bar-link-item"><a class="page-footer__envato-bar-link" data-action="click->ga-analytics#sendPlaceitClickEvent" href="https://placeit.net/">Placeit by Envato</a></li><li class="page-footer__envato-bar-link-item"><a class="page-footer__envato-bar-link" href="https://www.envato.com/products/">All products</a></li><li class="page-footer__envato-bar-link-item"><a class="page-footer__envato-bar-link" href="https://www.envato.com/about/careers/">Careers</a></li><li class="page-footer__envato-bar-link-item"><a class="page-footer__envato-bar-link" href="https://www.envato.com/sitemap/">Sitemap</a></li></ul><div class="page-footer__copyright">© 2025 Envato Pty Ltd. Trademarks and brands are the property of their respective owners.</div></div><div class="page-footer__envato-bar-content-right-column"><ul class="page-footer__follow-us"><li class="page-footer__follow-us-element"><a class="page-footer__social-link page-footer__youtube-link" href="https://www.youtube.com/@envatotuts"><img alt="Youtube" loading="lazy" width="24px" height="24px" src="https://static.tutsplus.com/packs/static/images/social_youtube-2fdd89edede4b116d099.svg" /></a></li><li class="page-footer__follow-us-element"><a class="page-footer__social-link page-footer__instagram-link" href="https://www.instagram.com/envato/"><img alt="Instagram" loading="lazy" width="24px" height="24px" src="https://static.tutsplus.com/packs/static/images/social_instagram-f01c9d7dc71f1ea86182.svg" /></a></li><li class="page-footer__follow-us-element"><a class="page-footer__social-link page-footer__tiktok-link" href="https://www.tiktok.com/@envato"><img alt="Tiktok" loading="lazy" width="24px" height="24px" src="https://static.tutsplus.com/packs/static/images/social_tiktok-57b06ff17a284d8a1744.svg" /></a></li><li class="page-footer__follow-us-element"><a class="page-footer__social-link page-footer__facebook-link" href="https://www.facebook.com/envato/"><img alt="Facebook" loading="lazy" width="24px" height="24px" src="https://static.tutsplus.com/packs/static/images/social_facebook-f35494f677e855ad50dd.svg" /></a></li><li class="page-footer__follow-us-element"><a class="page-footer__social-link page-footer__twitter-link" href="https://twitter.com/envato"><img alt="Twitter" loading="lazy" width="24px" height="24px" src="https://static.tutsplus.com/packs/static/images/social_twitter-98772a5169f3f29dd437.svg" /></a></li><li class="page-footer__follow-us-element"><a class="page-footer__social-link page-footer__pinterest-link" href="https://www.pinterest.com.au/envato/"><img alt="Pinterest" loading="lazy" width="24px" height="24px" src="https://static.tutsplus.com/packs/static/images/social_pinterest-c768bee1968ceb51ae43.svg" /></a></li></ul></div></div></div></footer><script defer="defer" src="https://www.google-analytics.com/analytics.js"></script><div class="sticky-footer-ad"><turbo-frame id="publift_lazy_article_sticky_footer" loading="lazy" src="/promotions/publift_promotion?position=article_sticky_footer&variation=sticky-footer"><div class="avert fuse-ad avert--sticky-footer"><div class="avert__wrapper"><div class="avert__content"></div><div class="avert__label">Advertisement</div></div></div></turbo-frame></div><script defer="defer" src="https://cdn.fuseplatform.net/publift/tags/2/1007/fuse.js"></script> <noscript> <img height="1" width="1" style="display:none" src="https://www.facebook.com/tr?id=912712196247539&ev=PageView&noscript=1"/> </noscript> <script src="https://static.tutsplus.com/packs/js/lazy_load_third_party_libraries-3f74f88902b8cb9ca575.js" defer="defer"></script><script type="text/javascript"> /* <![CDATA[ */ var google_conversion_id = 943617023; var google_custom_params = window.google_tag_params; var google_remarketing_only = true; /* ]]> */ </script> <script type="text/javascript" defer="defer" src="//www.googleadservices.com/pagead/conversion.js"> </script> <noscript> <div style="display:inline;"> <img height="1" width="1" style="border-style:none;" alt="" src="//googleads.g.doubleclick.net/pagead/viewthroughconversion/943617023/?value=0&guid=ON&script=0"/> </div> </noscript> </body></html>