CSS Animations from CodeCanyon

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <link rel="preload" href="https://assets.market-storefront.envato-static.com/storefront/assets/styles-9356b4a12a36375415db87b151e42cae45eab7bce9856f01161cd92f128ceaaf.css" as="style" type="text/css"> <link rel="preload" href="https://market-resized.envatousercontent.com/previews/files/1411253/shadow-preview.jpg?w=590&h=300&cf_fit=crop&crop=top&format=auto&q=85&s=242addad86b4f605369b2dfab7dc68e43936f52a0d20acc17d84f6abd7b241ed" as="image"> <link rel="stylesheet" href="https://assets.market-storefront.envato-static.com/storefront/assets/styles-9356b4a12a36375415db87b151e42cae45eab7bce9856f01161cd92f128ceaaf.css" media="all" data-turbo-track="reload" /> <link rel="preconnect" href="//market-resized.envatousercontent.com" crossorigin> <link rel="dns-prefetch" href="//market-resized.envatousercontent.com"> <link rel="preconnect" href="//assets.market-storefront.envato-static.com" crossorigin> <link rel="dns-prefetch" href="//assets.market-storefront.envato-static.com"> <link rel="preconnect" href="//consentcdn.cookiebot.com" crossorigin> <link rel="dns-prefetch" href="//consentcdn.cookiebot.com"> <script> //<![CDATA[ window.datadogEnvironment = 'production' window.datadogSampleRate = 2 window.datadogVersion = 'a8b1d06405ef99fe97945613d7d8657d1ada77fc' //]]> </script> <script src="https://assets.market-storefront.envato-static.com/storefront/assets/datadog-02ec07d789a19399ecf632e1d7b976d87f4588e463475c1079b841a07dcac762.js" crossorigin="anonymous"></script> <title>CSS Animations from CodeCanyon</title> <meta name="description" content="Get 233 CSS animations. All from our global community of web developers."> <link rel="canonical" href="https://codecanyon.net/category/css/animations-and-effects"> <meta property="og:url" content="https://codecanyon.net/category/css/animations-and-effects"> <meta property="og:title" content="CSS Animations from CodeCanyon"> <meta property="og:description" content="Get 233 CSS animations. All from our global community of web developers."> <meta property="og:type" content="website"> <meta property="og:site_name" content="CodeCanyon"> <meta property="og:image" content="https://assets.market-storefront.envato-static.com/storefront/assets/og-images/codecanyon-8a958e908fbb5bac5e54b32ca329c7d31b9e134bad20fb2ea1f1531701ca0561.png"> <meta name="bingbot" content="nocache"> <meta property="fb:admins" content="580836304"> <meta name="yandex-verification" content="58faa6ff34c071e6"> <meta name="baidu-site-verification" content="x0xoFSsC7y"> <meta name="msvalidate.01" content="671616CA558AF093483E9570081ACD21"> <link rel="icon" type="image/ico" href="https://assets.market-storefront.envato-static.com/storefront/assets/favicons/favicon-683776860a73328fbfb90221f38228ae31fd55217f17b0fdba2daa1727c47dbd.ico"> <link rel="apple-touch-icon-precomposed" sizes="144x144" href="https://assets.market-storefront.envato-static.com/storefront/assets/favicons/apple-touch-icon-144x144-precomposed-a2606626583ce37053a6dca090b0b0d3a9483148984d8006645e267620fd14f8.png"> <link rel="apple-touch-icon-precomposed" sizes="114x114" href="https://assets.market-storefront.envato-static.com/storefront/assets/favicons/apple-touch-icon-114x114-precomposed-1486df5684777065c578079fd79ca115b237a6442c34a9933f301c2441fbac6f.png"> <link rel="apple-touch-icon-precomposed" sizes="72x72" href="https://assets.market-storefront.envato-static.com/storefront/assets/favicons/apple-touch-icon-72x72-precomposed-1b00bb9e3922f5db75e20ee89b8b235c613bb16de8724542f9d23efab119c3ce.png"> <link rel="apple-touch-icon-precomposed" href="https://assets.market-storefront.envato-static.com/storefront/assets/favicons/apple-touch-icon-precomposed-a2606626583ce37053a6dca090b0b0d3a9483148984d8006645e267620fd14f8.png"> <script type="text/javascript" data-turbo-eval="false"> window.addEventListener("CookiebotOnDialogDisplay", (event) => { const cookieDialog = event.srcElement.CookieConsentDialog.DOM cookieDialog.dataset.turbo = false }) </script> <script src="https://consent.cookiebot.com/uc.js" data-cbid="d10f7659-aa82-4007-9cf1-54a9496002bf" data-georegions="{"region":"US","cbid":"d9683f70-895f-4427-97dc-f1087cddf9d8"}" defer="defer" id="Cookiebot"></script> <meta content="origin-when-cross-origin" name="referrer"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="theme-color" content="#333333"> <meta name="sso_server_domain" content="https://account.envato.com"> <meta name="sso_client_key" content="codecanyon"> <meta name="revision" content="a8b1d06405ef99fe97945613d7d8657d1ada77fc"> <meta name="csrf-param" content="authenticity_token" /> <meta name="csrf-token"> <link rel="next" href="/category/css/animations-and-effects?page=2" /> <script type="text/javascript" data-turbo-eval="false"> var GA_LOCAL_STORAGE_KEY = 'ga:clientId'; function canUseLocalStorage() { var t = "t"; try { localStorage.setItem(t, t); localStorage.removeItem(t); return true; } catch (e) { return false; } } function retrieveClientId() { return localStorage.getItem(GA_LOCAL_STORAGE_KEY); } function storeClientId(clientId) { return localStorage.setItem(GA_LOCAL_STORAGE_KEY, clientId); } function trackingCookieSet() { return !!document.cookie.match(/_ga=/); } function linkerParamPresent() { return !!window.location.search.match(/_ga=/); } function clientIdNotPresent() { return !(trackingCookieSet() || linkerParamPresent()); } window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date; var accountId = 'UA-11834194-12'; var options = { allowLinker: true, siteSpeedSampleRate: 40, clientDomain: "auto", }; if (canUseLocalStorage()) { if (clientIdNotPresent()) { options.clientId = retrieveClientId(); } window.ga('create', accountId, options); window.ga(function(tracker) { var clientId = tracker.get('clientId'); storeClientId(clientId); window.ga('set', 'dimension18', clientId); }); } else { window.ga('create', accountId, options); } window.ga('require', 'GTM-5VPWWP'); window.ga('require', 'linker'); window.ga('require', 'ec'); window.ga('require', 'displayfeatures'); window.ga('require', 'linkid'); window.ga('set', 'dimension19', 'Market Storefront'); </script> <script type="application/ld+json"> { "@context": "http://schema.org", "@type": "WebSite", "name": "CodeCanyon", "url": "https://codecanyon.net" } </script> <script> //<![CDATA[ var rollbarClientToken = "0924cd7a408b49498096b5c1ade65966" var rollbarEnvironment = "production" //]]> </script> <script> //<![CDATA[ var gtmConfig = {} //]]> </script><script src="https://assets.market-storefront.envato-static.com/storefront/assets/gtm_measurements-c74cd0457589db0dcc890febe780984830bc2c525c37a996f6c0e6a09b948fa0.js" data-turbo-track="reload" defer="defer" nonce="true"></script> <script src="https://assets.market-storefront.envato-static.com/storefront/assets/rollbar-ffa9e0b16064f14ef07de507e6ba34cc233a053c53514cc5599c8bf799a30407.js" crossorigin="anonymous" data-turbo-track="reload" defer="defer"></script> <script src="https://assets.market-storefront.envato-static.com/storefront/assets/legacy-947e52c66b6c54d32e6af8842543dfc056ad6c8c8fd221c5febb01e577162e02.js" crossorigin="anonymous" data-turbo-track="reload" nomodule="nomodule"></script> <script src="https://assets.market-storefront.envato-static.com/storefront/assets/application-a5263d48cceef5e8f723c27d17bcd9fbd36066f5120c6d6562cd37b51c848053.js" crossorigin="anonymous" data-turbo-track="reload" defer="defer"></script> </head> <body class="no-js color-scheme-light" data-controller="yes-js favorites-loader ga-linker auto-sign-in impression-tracker" data-action="mousedown->ga-linker#decorateLink click->ga-linker#decorateLink contextmenu->ga-linker#decorateLink" data-analytics-context="body" data-google-analytics-id="UA-11834194-12" data-google-tag-manager-marketing-id="GTM-KGCDGPL6" data-google-tag-manager-statistics-id="GTM-W8KL5Q5" data-google-tag-manager-marketing-env-params="" data-google-tag-manager-statistics-env-params="" data-site="codecanyon" data-site-domain="codecanyon.net" > <noscript> <iframe src="https://www.googletagmanager.com/ns.html?id=GTM-KGCDGPL6" height="0" width="0" style="display:none;visibility:hidden" > </iframe> </noscript> <noscript> <iframe src="https://www.googletagmanager.com/ns.html?id=GTM-W8KL5Q5" height="0" width="0" style="display:none;visibility:hidden" > </iframe> </noscript> <script> //<![CDATA[ (function() { function normalizeAttributeValue(value) { if (value === undefined) return undefined if (value === null) return undefined let normalizedValue if (Array.isArray(value)) { normalizedValue = normalizedValue || value .map(normalizeAttributeValue) .filter(Boolean) .join(', ') } normalizedValue = normalizedValue || value .toString() .toLowerCase() .trim() .replace(/&/g, '&') .replace(/'/g, "'") .replace(/\s+/g, ' ') if (normalizedValue === '') return undefined return normalizedValue } function parseSignedInUserIdsFromCookie() { if (!document.cookie) return { envatoId: undefined, marketId: undefined }; var prefix = "statistics_info="; var cookie = document.cookie.split('; ').find(function(part) { return part.startsWith(prefix); }) if (cookie === undefined) return { envatoId: undefined, marketId: undefined }; var ids = decodeURIComponent(cookie.substring(prefix.length)).split(":"); return { envatoId: ids[0], marketId: ids[1] }; } if (document.documentElement.hasAttribute('data-turbo-preview')) return window.dataLayer = window.dataLayer || []; var gaParam = (new URL(window.location)).searchParams.get("_ga") var signedInUserIds = parseSignedInUserIdsFromCookie(); var categoryAttributes = JSON.parse('{"custom_item_category":"css","custom_item_category_2":"animations-and-effects"}'); var pageAttributes = { app_name: normalizeAttributeValue('market-storefront'), app_env: normalizeAttributeValue('production'), app_version: normalizeAttributeValue('a8b1d06405ef99fe97945613d7d8657d1ada77fc'), page_type: normalizeAttributeValue('item catalogue'), page_location: window.location.href, page_referrer: document.referrer, page_title: document.title, ga_param: normalizeAttributeValue(gaParam ? '_ga='+gaParam : undefined), event_attributes: null, user_attributes: { user_id: normalizeAttributeValue(signedInUserIds.envatoId), market_user_id: normalizeAttributeValue(signedInUserIds.marketId), }, ...categoryAttributes }; dataLayer.push(pageAttributes) dataLayer.push({ event: 'analytics_ready', event_attributes: { event_type: 'user', custom_timestamp: Date.now() } }) })(); //]]> </script> <a class="layouts-application_layout__skipLink" data-controller="skip-link" data-action="click->skip-link#skipToMain" href="javascript:void(0)">Skip to content</a> <div class="shared-global_header-global_header_component__headerWrapper" role="banner"> <div class="shared-global_header-global_header_component__desktopHeader shared-global_header-global_header_component__bannerPlaceholder"> <div class="shared-global_header-logo_bar_component__headerTopWrapper"> <div class="shared-global_header-logo_bar_component__gridWideSection"> <a href="/" class="shared-global_header-logo_bar_component__logoImageWrapper"> <img src="https://assets.market-storefront.envato-static.com/storefront/assets/logos/envato-market-0c6ef0bdbf918a098bf915273cd4ca39cb1afd7992deef185dafe33b2c623b2f.svg" height="20" alt="Envato Market logo" /> <span class="shared-global_header-logo_bar_component__hiddenText">Envato Market</span> </a> <nav class="shared-global_header-logo_bar_component__nav" aria-label="account" data-turbo="false"> <a class="shared-global_header-logo_bar_component__menuLink" href="https://forums.envato.com"> Forums </a> <a class="shared-global_header-logo_bar_component__menuLink" href="https://author.envato.com"> Start Selling </a> <div class="shared-global_header-dropdown_component__guestUserMenuWrapper" data-turbo="false"> <a class="shared-global_header-our_products_component__ourProductMenuLink" href="#"> <span class="shared-global_header-our_products_component__menuDropdownIconWrapper"> <svg width='100%' height='100%'> <use xlink:href='/storefront/assets/icon_spritesheet-2c8173174a30370958101e9b5e0dc4a0503c16573b4e2c0961245849681b052e.svg#dialer'></use> </svg> </span> <span class="shared-global_header-our_products_component__menuLinkText">Our Products</span> </a> <div class="shared-global_header-dropdown_component__dropdownWrapper"> <div class="shared-global_header-dropdown_component__dropdown"> <nav class="shared-global_header-our_products_component__dropdownListWrapper" aria-label="our products"> <a class="shared-global_header-our_products_component__dropdownLink" title="The unlimited creative subscription" rel="noopener" target="_blank" href="https://elements.envato.com/?utm_source=envatomarket&utm_medium=promos&utm_campaign=elements_mkt-headernav_our_products_26AUG2024&utm_content=headernav" data-impression-tracker-target="promotion" data-analytics-view-payload="{"eventName":"view_promotion","eventType":"user","contextDetail":"product picker","ecommerce":{"promotionId":"elements_mkt-headernav_our_products_26AUG2024","promotionName":"elements_mkt-headernav_our_products_26AUG2024","promotionType":"elements referral"}}" data-analytics-click-payload="{"eventName":"select_promotion","eventType":"user","contextDetail":"product picker","ecommerce":{"promotionId":"elements_mkt-headernav_our_products_26AUG2024","promotionName":"elements_mkt-headernav_our_products_26AUG2024","promotionType":"elements referral"}}" > <div class="shared-global_header-our_products_component__dropdownLinkLogo"> <img loading="lazy" alt="Envato Elements" height="16" src="https://assets.market-storefront.envato-static.com/storefront/assets/logos/envato-elements-e1a82c06abeaebefed5ef0159102a06cd996de649ea62018b395978c09cd1edc.svg" /> </div> <span class="shared-global_header-our_products_component__dropdownText">The unlimited creative subscription</span> </a> <a class="shared-global_header-our_products_component__dropdownLink" title="Free creative tutorials and courses" rel="noopener" target="_blank" href="https://tutsplus.com/?utm_source=envatomarket&utm_medium=promos&utm_campaign=tutsplus_mkt-headernav_our_products_26AUG2024&utm_content=headernav" > <div class="shared-global_header-our_products_component__dropdownLinkLogo"> <img loading="lazy" alt="Envato Tuts+" height="16" src="https://assets.market-storefront.envato-static.com/storefront/assets/logos/envato-tutsplus-e2d6fc98c47f1e35aa7ca0b06afc8d21e7951b59c468608472334ef6014743fd.svg" /> </div> <span class="shared-global_header-our_products_component__dropdownText">Free creative tutorials and courses</span> </a> <a class="shared-global_header-our_products_component__dropdownLink" title="Customize mockups, design and video" rel="noopener" target="_blank" href="https://placeit.net/?utm_source=envatomarket&utm_medium=promos&utm_campaign=placeit_mkt-headernav_our_products_26AUG2024&utm_content=headernav" data-impression-tracker-target="promotion" data-analytics-view-payload="{"eventName":"view_promotion","eventType":"user","contextDetail":"product picker","ecommerce":{"promotionId":"placeit_mkt-headernav_our_products_26AUG2024","promotionName":"placeit_mkt-headernav_our_products_26AUG2024","promotionType":""}}" data-analytics-click-payload="{"eventName":"select_promotion","eventType":"user","contextDetail":"product picker","ecommerce":{"promotionId":"placeit_mkt-headernav_our_products_26AUG2024","promotionName":"placeit_mkt-headernav_our_products_26AUG2024","promotionType":""}}" > <div class="shared-global_header-our_products_component__dropdownLinkLogo"> <img loading="lazy" alt="Envato Placeit" height="16" src="https://assets.market-storefront.envato-static.com/storefront/assets/logos/envato-placeit-8320463adc8087b3a88d83e0529f594c02741a33a3d1b19a47cdf947c43083b2.svg" /> </div> <span class="shared-global_header-our_products_component__dropdownText">Customize mockups, design and video</span> </a> </nav> <div class="shared-global_header-our_products_component__navFooter"> <ul class="shared-global_header-our_products_component__navFooterListWrapper"> <li class="shared-global_header-our_products_component__footerItem"> Join the <a class="shared-global_header-our_products_component__footerLink" href="https://community.envato.com" target="_blank" rel="noopener">Envato community</a> </li> <li class="shared-global_header-our_products_component__footerItem"> Learn from others in <a class="shared-global_header-our_products_component__footerLink" href="https://forums.envato.com" target="_blank" rel="noopener">the forums</a> </li> </ul> </div> </div> </div> </div> <span class="shared-global_header-logo_bar_component__userCartWrapper"> <a class="shared-global_header-cart_link_component__root" href="/cart" title="Cart" id="cart-link-desktop" data-turbo-permanent data-turbo="false" > <span class="shared-global_header-cart_link_component__userCartIcon"> <svg width='100%' height='100%'> <use xlink:href='/storefront/assets/icon_spritesheet-2c8173174a30370958101e9b5e0dc4a0503c16573b4e2c0961245849681b052e.svg#cart'></use> </svg> </span> <span class="shared-global_header-cart_link_component__userCartCount" data-controller="cart-icon" data-action="cartStoreUpdated@window->cart-icon#updateFromStore" ></span> </a> </span> <span class="shared-global_header-logo_bar_component__usernameWrapper" id="tlp-header-user-nav" data-turbo-permanent data-controller="fragment-loader" data-fragment-loader-session-required-value="true" data-fragment-loader-url-value="/my/user_nav" > <div class="shared-global_header-dropdown_component__guestUserMenuWrapper shared-global_header-dropdown_component__disabled" data-turbo="false"> <a class="shared-global_header-user_nav_component__guestUserMenuLink" href="/sign_in" data-turbo="false" data-controller="modal-commander" data-action="modal-commander#open" data-modal-commander-url-value="/storefront/sign_in" > <span class="shared-global_header-user_nav_component__guestUserMenuText">Sign In</span> </a> <div class="shared-global_header-dropdown_component__dropdownWrapper"> <div class="shared-global_header-dropdown_component__dropdown"> </div> </div> </div> </span> </nav> </div> </div> <div class="shared-global_header-mobile_menu_component__headerTopMobileWrapper" data-controller="mobile-menu"> <div class="shared-global_header-mobile_menu_component__headerMobile"> <div class="shared-global_header-mobile_menu_component__accountButton"> <div> <div class="shared-global_header-cart_mini_link_component__cartButton"> <a class="shared-global_header-cart_mini_link_component__linkButton" href="/cart" title="Cart" data-turbo="false"> <span class="shared-global_header-cart_mini_link_component__userCartIcon"> <svg width='100%' height='100%'> <use xlink:href='/storefront/assets/icon_spritesheet-2c8173174a30370958101e9b5e0dc4a0503c16573b4e2c0961245849681b052e.svg#cart_mobile'></use> </svg> </span> <span class="shared-global_header-cart_mini_link_component__userCartCount" data-controller="cart-icon" data-action="cartStoreUpdated@window->cart-icon#updateFromStore" ></span> </a> </div> </div> <a class="shared-global_header-mobile_menu_component__linkButton" title="Open account menu" data-action="click->mobile-menu#openUserMenu" href="#"> <span class="shared-global_header-mobile_menu_component__linkIcon"> <svg width='100%' height='100%'> <use xlink:href='/storefront/assets/icon_spritesheet-2c8173174a30370958101e9b5e0dc4a0503c16573b4e2c0961245849681b052e.svg#person'></use> </svg> </span> </a> </div> <div class="shared-global_header-mobile_menu_component__categoriesButton"> <a class="shared-global_header-mobile_menu_component__linkButton" title="Open site menu" data-action="click->mobile-menu#openCategoriesMenu" href="#"> <span class="shared-global_header-mobile_menu_component__linkIcon"> <svg width='100%' height='100%'> <use xlink:href='/storefront/assets/icon_spritesheet-2c8173174a30370958101e9b5e0dc4a0503c16573b4e2c0961245849681b052e.svg#hamburger'></use> </svg> </span> </a> </div> <div> <a class="shared-global_header-mobile_menu_component__baseLogo" href="/"> <picture> <source srcset="https://assets.market-storefront.envato-static.com/storefront/assets/logos/codecanyon-09299c50d79dfe5cf129eeceacec330b0ee24ed7bf51a19aea3cb0112e2d4de0.webp" type="image/webp"> <img loading="lazy" src="https://assets.market-storefront.envato-static.com/storefront/assets/logos/codecanyon-f02914a18facfc9c3d14d4028cd87731c1541c11c16a891831b8bce05f92b4d8.png" alt="CodeCanyon" class="shared-global_header-mobile_menu_component__logo"> </picture> </a> </div> </div> <div class="shared-global_header-mobile_menu_component__offCanvasBackground" data-mobile-menu-target="categoriesMenu" > <div class="shared-global_header-mobile_menu_component__overlay" data-action="click->mobile-menu#closeMenu"></div> <template data-mobile-menu-target="categoriesTemplate"> <div class="shared-global_header-mobile_menu_component__offCanvasWrapper" data-controller="impression-tracker" > <div class="shared-global_header-mobile_menu_component__offCanvasLeftContainer"> <button class="shared-global_header-mobile_menu_component__canvasToggle" data-action="click->mobile-menu#closeMenu"> <svg fill="currentColor" preserveAspectRatio="xMidYMid meet" height="14px" width="14px" viewBox="0 0 10 10" style="vertical-align: middle;"> <title id="Close">Close</title> <g> <path d="M9.888641,1.2053571 C9.962881,1.2797623 10,1.3690471 10,1.4732143 C10,1.5773815 9.962881,1.6666663 9.888641,1.7410714 L6.904232,4.7321429 C6.829992,4.806548 6.792873,4.8958328 6.792873,5 C6.792873,5.1041672 6.829992,5.193452 6.904232,5.2678571 L9.86637,8.2589286 C9.955457,8.3333337 10,8.4226185 10,8.5267857 C10,8.6309529 9.955457,8.7202377 9.86637,8.7946429 L8.797327,9.8883929 C8.723088,9.962798 8.63029,10 8.518931,10 C8.407572,10 8.314774,9.962798 8.240535,9.8883929 L5.278396,6.8973214 C5.204157,6.8229163 5.111359,6.7857143 5,6.7857143 C4.888641,6.7857143 4.795843,6.8229163 4.721604,6.8973214 L1.737194,9.8883929 C1.662954,9.962798 1.573868,10 1.469933,10 C1.365998,10 1.276912,9.962798 1.202673,9.8883929 L0.111359,8.7946429 C0.037119,8.7202377 0,8.6309529 0,8.5267857 C0,8.4226185 0.037119,8.3333337 0.111359,8.2589286 L3.095768,5.2678571 C3.170008,5.193452 3.207127,5.1041672 3.207127,5 C3.207127,4.8958328 3.170008,4.806548 3.095768,4.7321429 L0.111359,1.7410714 C0.037119,1.6666663 0,1.5736613 0,1.4620536 C0,1.3504459 0.037119,1.2574408 0.111359,1.1830357 L1.202673,0.1116071 C1.276912,0.037202 1.36971,0 1.481069,0 C1.592428,0 1.685226,0.037202 1.759465,0.1116071 L4.721604,3.1026786 C4.795843,3.1770837 4.888641,3.2142857 5,3.2142857 C5.111359,3.2142857 5.204157,3.1770837 5.278396,3.1026786 L8.262806,0.1116071 C8.337046,0.037202 8.426132,0 8.530067,0 C8.634002,0 8.723088,0.037202 8.797327,0.1116071 L9.888641,1.2053571 Z"></path> </g> </svg> </button> <div class="shared-global_header-mobile_menu_component__logoImageWrapper"> <a class="shared-global_header-mobile_menu_component__logoImageLink" href="/"> <img alt="CodeCanyon" src="https://assets.market-storefront.envato-static.com/storefront/assets/logos/envato-market-0c6ef0bdbf918a098bf915273cd4ca39cb1afd7992deef185dafe33b2c623b2f.svg" height="15" /> <span class="shared-global_header-mobile_menu_component__hiddenText">Envato Market</span> </a> </div> <div data-controller="toggler"> <div class="shared-global_header-mobile_markets_nav_component__currentSiteSectionWrapper shared-global_header-mobile_markets_nav_component__codecanyonWrapper"> <div class="shared-global_header-mobile_markets_nav_component__currentSiteSpan">Code</div> <div class="shared-global_header-mobile_markets_nav_component__mainMenuToggle" data-toggler-target="toggle" data-toggler-expanded-class="shared-global_header-mobile_markets_nav_component__expanded" data-action="click->toggler#toggle" > <svg width='100%' height='100%'> <use xlink:href='/storefront/assets/icon_spritesheet-2c8173174a30370958101e9b5e0dc4a0503c16573b4e2c0961245849681b052e.svg#arrow_fill_down'></use> </svg> </div> </div> <div class="shared-global_header-mobile_markets_nav_component__sitesMenuWrapper" data-toggler-target="toggle" data-toggler-expanded-class="shared-global_header-mobile_markets_nav_component__expanded" > <a class="shared-global_header-mobile_markets_nav_component__siteLink" href="https://themeforest.net/?auto_signin=true"> <span class="shared-global_header-mobile_markets_nav_component__siteLinkText">Web Themes & Templates</span> </a> <a class="shared-global_header-mobile_markets_nav_component__siteLink" href="https://videohive.net/?auto_signin=true"> <span class="shared-global_header-mobile_markets_nav_component__siteLinkText">Video</span> </a> <a class="shared-global_header-mobile_markets_nav_component__siteLink" href="https://audiojungle.net/?auto_signin=true"> <span class="shared-global_header-mobile_markets_nav_component__siteLinkText">Audio</span> </a> <a class="shared-global_header-mobile_markets_nav_component__siteLink" href="https://graphicriver.net/?auto_signin=true"> <span class="shared-global_header-mobile_markets_nav_component__siteLinkText">Graphics</span> </a> <a class="shared-global_header-mobile_markets_nav_component__siteLink" href="https://photodune.net/?auto_signin=true"> <span class="shared-global_header-mobile_markets_nav_component__siteLinkText">Photos</span> </a> <a class="shared-global_header-mobile_markets_nav_component__siteLink" href="https://3docean.net/?auto_signin=true"> <span class="shared-global_header-mobile_markets_nav_component__siteLinkText">3D Files</span> </a> </div> </div> <div class="shared-global_header-mobile_menu_search_component__root shared-global_header-mobile_menu_search_component__noBorder"> <form role="search" method="get" action="/search" data-controller="search-event" data-action="submit->search-event#submit"> <div class="shared-global_header-mobile_menu_search_component__searchInlineElement"></div> <div class="shared-global_header-mobile_menu_search_component__form"> <div class="shared-global_header-mobile_menu_search_component__inputWrapper"> <input type="search" aria-label="search" class="shared-global_header-mobile_menu_search_component__input" name="term" placeholder="Search" role="search" value="" data-search-event-target="input"> </div> <button class="shared-global_header-mobile_menu_search_component__searchButton" type="submit"> <svg fill="currentColor" preserveAspectRatio="xMidYMid meet" height="1em" width="1em" viewBox="0 0 512 512" title="search" style="vertical-align: middle;"> <title>search</title> <g> <path d="M507.5 469.3c0 10.5-3.8 19.5-11.5 27.2s-16.7 11.5-27.2 11.5c-10.9 0-20-3.8-27.2-11.5l-103.7-103.4c-36.1 25-76.3 37.5-120.6 37.5-28.8 0-56.4-5.6-82.7-16.8s-49-26.3-68-45.3-34.2-41.7-45.3-68c-11.2-26.3-16.8-53.9-16.8-82.7s5.6-56.4 16.8-82.7 26.3-49 45.3-68 41.7-34.2 68-45.3c26.3-11.2 53.9-16.8 82.7-16.8s56.4 5.6 82.7 16.8c26.3 11.2 49 26.3 68 45.3s34.2 41.7 45.3 68c11.2 26.3 16.8 53.9 16.8 82.7 0 44.3-12.5 84.5-37.5 120.6l103.7 103.7c7.5 7.5 11.2 16.5 11.2 27.2zm-154.8-251.5c0-37.3-13.2-69.2-39.8-95.7-26.5-26.5-58.4-39.8-95.7-39.8s-69.2 13.3-95.7 39.8-39.8 58.4-39.8 95.7 13.2 69.2 39.8 95.7c26.5 26.5 58.4 39.8 95.7 39.8s69.2-13.2 95.7-39.8c26.6-26.5 39.8-58.4 39.8-95.7z"></path> </g> </svg> </button> </div> </form> </div> <div data-controller="toggler"> <a class="shared-global_header-categories_mobile_menu_component__linkRow" href="/category/all" data-turbo="true" data-action="click->toggler#toggle" data-toggler-target="toggle" data-toggler-expanded-class="shared-global_header-categories_mobile_menu_component__expanded" target="_self" > <div class="shared-global_header-categories_mobile_menu_component__link shared-global_header-categories_mobile_menu_component__linkRow"> All Items </div> <div class="shared-global_header-categories_mobile_menu_component__icon"> <svg width='100%' height='100%'> <use xlink:href='/storefront/assets/icon_spritesheet-2c8173174a30370958101e9b5e0dc4a0503c16573b4e2c0961245849681b052e.svg#arrow_fill_down'></use> </svg> </div> </a> <nav data-toggler-target="toggle" data-toggler-expanded-class="shared-global_header-categories_mobile_menu_component__expanded" class="shared-global_header-categories_mobile_menu_component__subLinks"> <a href="/top-sellers" target="_self" data-turbo="true" class="shared-global_header-categories_mobile_menu_component__link shared-global_header-categories_mobile_menu_component__sub" data-action="click->mobile-menu#closeMenu" > Popular Files </a> <a href="/feature" target="_self" data-turbo="true" class="shared-global_header-categories_mobile_menu_component__link shared-global_header-categories_mobile_menu_component__sub" data-action="click->mobile-menu#closeMenu" > Featured Files </a> <a href="/search?date=this-month&sort=sales" target="_self" data-turbo="true" class="shared-global_header-categories_mobile_menu_component__link shared-global_header-categories_mobile_menu_component__sub" data-action="click->mobile-menu#closeMenu" > Top New Files </a> <a href="/follow_feed" target="_self" data-turbo="false" class="shared-global_header-categories_mobile_menu_component__link shared-global_header-categories_mobile_menu_component__sub" data-action="click->mobile-menu#closeMenu" > Follow Feed </a> <a href="/authors/top" target="_self" data-turbo="false" class="shared-global_header-categories_mobile_menu_component__link shared-global_header-categories_mobile_menu_component__sub" data-action="click->mobile-menu#closeMenu" > Top Authors </a> <a href="/page/top_new_sellers" target="_self" data-turbo="false" class="shared-global_header-categories_mobile_menu_component__link shared-global_header-categories_mobile_menu_component__sub" data-action="click->mobile-menu#closeMenu" > Top New Authors </a> <a href="/collections" target="_self" data-turbo="false" class="shared-global_header-categories_mobile_menu_component__link shared-global_header-categories_mobile_menu_component__sub" data-action="click->mobile-menu#closeMenu" > Public Collections </a> <a href="/category" target="_self" data-turbo="false" class="shared-global_header-categories_mobile_menu_component__link shared-global_header-categories_mobile_menu_component__sub" data-action="click->mobile-menu#closeMenu" > View All Categories </a> </nav> </div> <div data-controller="toggler"> <a class="shared-global_header-categories_mobile_menu_component__linkRow" href="/category/php-scripts" data-turbo="true" data-action="click->toggler#toggle" data-toggler-target="toggle" data-toggler-expanded-class="shared-global_header-categories_mobile_menu_component__expanded" target="_self" > <div class="shared-global_header-categories_mobile_menu_component__link shared-global_header-categories_mobile_menu_component__linkRow"> PHP Scripts </div> <div class="shared-global_header-categories_mobile_menu_component__icon"> <svg width='100%' height='100%'> <use xlink:href='/storefront/assets/icon_spritesheet-2c8173174a30370958101e9b5e0dc4a0503c16573b4e2c0961245849681b052e.svg#arrow_fill_down'></use> </svg> </div> </a> <nav data-toggler-target="toggle" data-toggler-expanded-class="shared-global_header-categories_mobile_menu_component__expanded" class="shared-global_header-categories_mobile_menu_component__subLinks"> <a href="/category/php-scripts" target="_self" data-turbo="false" class="shared-global_header-categories_mobile_menu_component__link shared-global_header-categories_mobile_menu_component__sub" data-action="click->mobile-menu#closeMenu" > Show all PHP Scripts </a> <a href="/popular_item/by_category?category=php-scripts" target="_self" data-turbo="true" class="shared-global_header-categories_mobile_menu_component__link shared-global_header-categories_mobile_menu_component__sub" data-action="click->mobile-menu#closeMenu" > Popular Items </a> <a href="/category/php-scripts/add-ons" target="_self" data-turbo="true" class="shared-global_header-categories_mobile_menu_component__link shared-global_header-categories_mobile_menu_component__sub" data-action="click->mobile-menu#closeMenu" > Add-ons </a> <a href="/category/php-scripts/calendars" target="_self" data-turbo="true" class="shared-global_header-categories_mobile_menu_component__link shared-global_header-categories_mobile_menu_component__sub" data-action="click->mobile-menu#closeMenu" > Calendars </a> <a href="/category/php-scripts/countdowns" target="_self" data-turbo="true" class="shared-global_header-categories_mobile_menu_component__link shared-global_header-categories_mobile_menu_component__sub" data-action="click->mobile-menu#closeMenu" > Countdowns </a> <a href="/category/php-scripts/database-abstractions" target="_self" data-turbo="true" class="shared-global_header-categories_mobile_menu_component__link shared-global_header-categories_mobile_menu_component__sub" data-action="click->mobile-menu#closeMenu" > Database Abstractions </a> <a href="/category/php-scripts/forms" target="_self" data-turbo="true" class="shared-global_header-categories_mobile_menu_component__link shared-global_header-categories_mobile_menu_component__sub" data-action="click->mobile-menu#closeMenu" > Forms </a> <a href="/category/php-scripts/help-and-support-tools" target="_self" data-turbo="true" class="shared-global_header-categories_mobile_menu_component__link shared-global_header-categories_mobile_menu_component__sub" data-action="click->mobile-menu#closeMenu" > Help and Support Tools </a> <a href="/category/php-scripts/images-and-media" target="_self" data-turbo="true" class="shared-global_header-categories_mobile_menu_component__link shared-global_header-categories_mobile_menu_component__sub" data-action="click->mobile-menu#closeMenu" > Images and Media </a> <a href="/category/php-scripts/loaders-and-uploaders" target="_self" data-turbo="true" class="shared-global_header-categories_mobile_menu_component__link shared-global_header-categories_mobile_menu_component__sub" data-action="click->mobile-menu#closeMenu" > Loaders and Uploaders </a> <a href="/category/php-scripts/navigation" target="_self" data-turbo="true" class="shared-global_header-categories_mobile_menu_component__link shared-global_header-categories_mobile_menu_component__sub" data-action="click->mobile-menu#closeMenu" > Navigation </a> <a href="/category/php-scripts/news-tickers" target="_self" data-turbo="true" class="shared-global_header-categories_mobile_menu_component__link shared-global_header-categories_mobile_menu_component__sub" data-action="click->mobile-menu#closeMenu" > News Tickers </a> <a href="/category/php-scripts/polls" target="_self" data-turbo="true" class="shared-global_header-categories_mobile_menu_component__link shared-global_header-categories_mobile_menu_component__sub" data-action="click->mobile-menu#closeMenu" > Polls </a> <a href="/category/php-scripts/project-management-tools" target="_self" data-turbo="true" class="shared-global_header-categories_mobile_menu_component__link shared-global_header-categories_mobile_menu_component__sub" data-action="click->mobile-menu#closeMenu" > Project Management Tools </a> <a href="/category/php-scripts/ratings-and-charts" target="_self" data-turbo="true" class="shared-global_header-categories_mobile_menu_component__link shared-global_header-categories_mobile_menu_component__sub" data-action="click->mobile-menu#closeMenu" > Ratings and Charts </a> <a href="/category/php-scripts/search" target="_self" data-turbo="true" class="shared-global_header-categories_mobile_menu_component__link shared-global_header-categories_mobile_menu_component__sub" data-action="click->mobile-menu#closeMenu" > Search </a> <a href="/category/php-scripts/shopping-carts" target="_self" data-turbo="true" class="shared-global_header-categories_mobile_menu_component__link shared-global_header-categories_mobile_menu_component__sub" data-action="click->mobile-menu#closeMenu" > Shopping Carts </a> <a href="/category/php-scripts/social-networking" target="_self" data-turbo="true" class="shared-global_header-categories_mobile_menu_component__link shared-global_header-categories_mobile_menu_component__sub" data-action="click->mobile-menu#closeMenu" > Social Networking </a> <a href="/category/php-scripts/miscellaneous" target="_self" data-turbo="true" class="shared-global_header-categories_mobile_menu_component__link shared-global_header-categories_mobile_menu_component__sub" data-action="click->mobile-menu#closeMenu" > Miscellaneous </a> </nav> </div> <div data-controller="toggler"> <a class="shared-global_header-categories_mobile_menu_component__linkRow" href="/category/wordpress" data-turbo="true" data-action="click->toggler#toggle" data-toggler-target="toggle" data-toggler-expanded-class="shared-global_header-categories_mobile_menu_component__expanded" target="_self" > <div class="shared-global_header-categories_mobile_menu_component__link shared-global_header-categories_mobile_menu_component__linkRow"> WordPress </div> <div class="shared-global_header-categories_mobile_menu_component__icon"> <svg width='100%' height='100%'> <use xlink:href='/storefront/assets/icon_spritesheet-2c8173174a30370958101e9b5e0dc4a0503c16573b4e2c0961245849681b052e.svg#arrow_fill_down'></use> </svg> </div> </a> <nav data-toggler-target="toggle" data-toggler-expanded-class="shared-global_header-categories_mobile_menu_component__expanded" class="shared-global_header-categories_mobile_menu_component__subLinks"> <a href="/category/wordpress" target="_self" data-turbo="false" class="shared-global_header-categories_mobile_menu_component__link shared-global_header-categories_mobile_menu_component__sub" data-action="click->mobile-menu#closeMenu" > Show all WordPress </a> <a href="/popular_item/by_category?category=wordpress" target="_self" data-turbo="true" class="shared-global_header-categories_mobile_menu_component__link shared-global_header-categories_mobile_menu_component__sub" data-action="click->mobile-menu#closeMenu" > Popular Items </a> <a href="/category/wordpress/add-ons" target="_self" data-turbo="true" class="shared-global_header-categories_mobile_menu_component__link shared-global_header-categories_mobile_menu_component__sub" data-action="click->mobile-menu#closeMenu" > Add-ons </a> <a href="/category/wordpress/advertising" target="_self" data-turbo="true" class="shared-global_header-categories_mobile_menu_component__link shared-global_header-categories_mobile_menu_component__sub" data-action="click->mobile-menu#closeMenu" > Advertising </a> <a href="/category/wordpress/calendars" target="_self" data-turbo="true" class="shared-global_header-categories_mobile_menu_component__link shared-global_header-categories_mobile_menu_component__sub" data-action="click->mobile-menu#closeMenu" > Calendars </a> <a href="/category/wordpress/ecommerce" target="_self" data-turbo="true" class="shared-global_header-categories_mobile_menu_component__link shared-global_header-categories_mobile_menu_component__sub" data-action="click->mobile-menu#closeMenu" > eCommerce </a> <a href="/attributes/compatible-with/elementor" target="_self" data-turbo="true" class="shared-global_header-categories_mobile_menu_component__link shared-global_header-categories_mobile_menu_component__sub" data-action="click->mobile-menu#closeMenu" > Elementor </a> <a href="/category/wordpress/forms" target="_self" data-turbo="true" class="shared-global_header-categories_mobile_menu_component__link shared-global_header-categories_mobile_menu_component__sub" data-action="click->mobile-menu#closeMenu" > Forms </a> <a href="/category/wordpress/forums" target="_self" data-turbo="true" class="shared-global_header-categories_mobile_menu_component__link shared-global_header-categories_mobile_menu_component__sub" data-action="click->mobile-menu#closeMenu" > Forums </a> <a href="/category/wordpress/galleries" target="_self" data-turbo="true" class="shared-global_header-categories_mobile_menu_component__link shared-global_header-categories_mobile_menu_component__sub" data-action="click->mobile-menu#closeMenu" > Galleries </a> <a href="/category/wordpress/interface-elements" target="_self" data-turbo="true" class="shared-global_header-categories_mobile_menu_component__link shared-global_header-categories_mobile_menu_component__sub" data-action="click->mobile-menu#closeMenu" > Interface Elements </a> <a href="/category/wordpress/media" target="_self" data-turbo="true" class="shared-global_header-categories_mobile_menu_component__link shared-global_header-categories_mobile_menu_component__sub" data-action="click->mobile-menu#closeMenu" > Media </a> <a href="/category/wordpress/membership" target="_self" data-turbo="true" class="shared-global_header-categories_mobile_menu_component__link shared-global_header-categories_mobile_menu_component__sub" data-action="click->mobile-menu#closeMenu" > Membership </a> <a href="/category/wordpress/newsletters" target="_self" data-turbo="true" class="shared-global_header-categories_mobile_menu_component__link shared-global_header-categories_mobile_menu_component__sub" data-action="click->mobile-menu#closeMenu" > Newsletters </a> <a href="/category/wordpress/seo" target="_self" data-turbo="true" class="shared-global_header-categories_mobile_menu_component__link shared-global_header-categories_mobile_menu_component__sub" data-action="click->mobile-menu#closeMenu" > SEO </a> <a href="/category/wordpress/social-networking" target="_self" data-turbo="true" class="shared-global_header-categories_mobile_menu_component__link shared-global_header-categories_mobile_menu_component__sub" data-action="click->mobile-menu#closeMenu" > Social Networking </a> <a href="/category/wordpress/utilities" target="_self" data-turbo="true" class="shared-global_header-categories_mobile_menu_component__link shared-global_header-categories_mobile_menu_component__sub" data-action="click->mobile-menu#closeMenu" > Utilities </a> <a href="/category/wordpress/widgets" target="_self" data-turbo="true" class="shared-global_header-categories_mobile_menu_component__link shared-global_header-categories_mobile_menu_component__sub" data-action="click->mobile-menu#closeMenu" > Widgets </a> <a href="/category/wordpress/miscellaneous" target="_self" data-turbo="true" class="shared-global_header-categories_mobile_menu_component__link shared-global_header-categories_mobile_menu_component__sub" data-action="click->mobile-menu#closeMenu" > Miscellaneous </a> <a href="https://themeforest.net/category/wordpress" target="_self" data-turbo="false" class="shared-global_header-categories_mobile_menu_component__link shared-global_header-categories_mobile_menu_component__sub" data-action="click->mobile-menu#closeMenu" > WordPress Themes on ThemeForest </a> </nav> </div> <div data-controller="toggler"> <a class="shared-global_header-categories_mobile_menu_component__linkRow" href="/search/ecommerce" data-turbo="true" data-action="click->toggler#toggle" data-toggler-target="toggle" data-toggler-expanded-class="shared-global_header-categories_mobile_menu_component__expanded" target="_self" > <div class="shared-global_header-categories_mobile_menu_component__link shared-global_header-categories_mobile_menu_component__linkRow"> eCommerce </div> <div class="shared-global_header-categories_mobile_menu_component__icon"> <svg width='100%' height='100%'> <use xlink:href='/storefront/assets/icon_spritesheet-2c8173174a30370958101e9b5e0dc4a0503c16573b4e2c0961245849681b052e.svg#arrow_fill_down'></use> </svg> </div> </a> <nav data-toggler-target="toggle" data-toggler-expanded-class="shared-global_header-categories_mobile_menu_component__expanded" class="shared-global_header-categories_mobile_menu_component__subLinks"> <a href="/search/ecommerce" target="_self" data-turbo="false" class="shared-global_header-categories_mobile_menu_component__link shared-global_header-categories_mobile_menu_component__sub" data-action="click->mobile-menu#closeMenu" > Show all eCommerce </a> <a href="/search?compatible_with=Easy+Digital+Downloads" target="_self" data-turbo="true" class="shared-global_header-categories_mobile_menu_component__link shared-global_header-categories_mobile_menu_component__sub" data-action="click->mobile-menu#closeMenu" > Easy Digital Downloads </a> <a href="/category/wordpress/ecommerce/jigoshop" target="_self" data-turbo="true" class="shared-global_header-categories_mobile_menu_component__link shared-global_header-categories_mobile_menu_component__sub" data-action="click->mobile-menu#closeMenu" > Jigoshop </a> <a href="/category/plugins/magento-extensions" target="_self" data-turbo="true" class="shared-global_header-categories_mobile_menu_component__link shared-global_header-categories_mobile_menu_component__sub" data-action="click->mobile-menu#closeMenu" > Magento Extensions </a> <a href="/category/plugins/opencart" target="_self" data-turbo="true" class="shared-global_header-categories_mobile_menu_component__link shared-global_header-categories_mobile_menu_component__sub" data-action="click->mobile-menu#closeMenu" > OpenCart </a> <a href="/category/plugins/oscommerce" target="_self" data-turbo="true" class="shared-global_header-categories_mobile_menu_component__link shared-global_header-categories_mobile_menu_component__sub" data-action="click->mobile-menu#closeMenu" > osCommerce </a> <a href="/category/plugins/prestashop" target="_self" data-turbo="true" class="shared-global_header-categories_mobile_menu_component__link shared-global_header-categories_mobile_menu_component__sub" data-action="click->mobile-menu#closeMenu" > Prestashop </a> <a href="/category/plugins/ubercart" target="_self" data-turbo="true" class="shared-global_header-categories_mobile_menu_component__link shared-global_header-categories_mobile_menu_component__sub" data-action="click->mobile-menu#closeMenu" > UberCart </a> <a href="/category/plugins/virtuemart" target="_self" data-turbo="true" class="shared-global_header-categories_mobile_menu_component__link shared-global_header-categories_mobile_menu_component__sub" data-action="click->mobile-menu#closeMenu" > VirtueMart </a> <a href="/category/wordpress/ecommerce/woocommerce" target="_self" data-turbo="true" class="shared-global_header-categories_mobile_menu_component__link shared-global_header-categories_mobile_menu_component__sub" data-action="click->mobile-menu#closeMenu" > WooCommerce </a> <a href="/category/wordpress/ecommerce/wp-e-commerce" target="_self" data-turbo="true" class="shared-global_header-categories_mobile_menu_component__link shared-global_header-categories_mobile_menu_component__sub" data-action="click->mobile-menu#closeMenu" > WP e-Commerce </a> <a href="/category/wordpress/ecommerce/standalone" target="_self" data-turbo="true" class="shared-global_header-categories_mobile_menu_component__link shared-global_header-categories_mobile_menu_component__sub" data-action="click->mobile-menu#closeMenu" > WP Standalone </a> <a href="/category/plugins/zen-cart" target="_self" data-turbo="true" class="shared-global_header-categories_mobile_menu_component__link shared-global_header-categories_mobile_menu_component__sub" data-action="click->mobile-menu#closeMenu" > Zen Cart </a> <a href="/category/wordpress/ecommerce/miscellaneous" target="_self" data-turbo="true" class="shared-global_header-categories_mobile_menu_component__link shared-global_header-categories_mobile_menu_component__sub" data-action="click->mobile-menu#closeMenu" > Miscellaneous </a> </nav> </div> <div data-controller="toggler"> <a class="shared-global_header-categories_mobile_menu_component__linkRow" href="/category/javascript" data-turbo="true" data-action="click->toggler#toggle" data-toggler-target="toggle" data-toggler-expanded-class="shared-global_header-categories_mobile_menu_component__expanded" target="_self" > <div class="shared-global_header-categories_mobile_menu_component__link shared-global_header-categories_mobile_menu_component__linkRow"> JavaScript </div> <div class="shared-global_header-categories_mobile_menu_component__icon"> <svg width='100%' height='100%'> <use xlink:href='/storefront/assets/icon_spritesheet-2c8173174a30370958101e9b5e0dc4a0503c16573b4e2c0961245849681b052e.svg#arrow_fill_down'></use> </svg> </div> </a> <nav data-toggler-target="toggle" data-toggler-expanded-class="shared-global_header-categories_mobile_menu_component__expanded" class="shared-global_header-categories_mobile_menu_component__subLinks"> <a href="/category/javascript" target="_self" data-turbo="false" class="shared-global_header-categories_mobile_menu_component__link shared-global_header-categories_mobile_menu_component__sub" data-action="click->mobile-menu#closeMenu" > Show all JavaScript </a> <a href="/popular_item/by_category?category=javascript" target="_self" data-turbo="true" class="shared-global_header-categories_mobile_menu_component__link shared-global_header-categories_mobile_menu_component__sub" data-action="click->mobile-menu#closeMenu" > Popular Items </a> <a href="/category/javascript/animated-svgs" target="_self" data-turbo="true" class="shared-global_header-categories_mobile_menu_component__link shared-global_header-categories_mobile_menu_component__sub" data-action="click->mobile-menu#closeMenu" > Animated SVGs </a> <a href="/category/javascript/calendars" target="_self" data-turbo="true" class="shared-global_header-categories_mobile_menu_component__link shared-global_header-categories_mobile_menu_component__sub" data-action="click->mobile-menu#closeMenu" > Calendars </a> <a href="/category/javascript/countdowns" target="_self" data-turbo="true" class="shared-global_header-categories_mobile_menu_component__link shared-global_header-categories_mobile_menu_component__sub" data-action="click->mobile-menu#closeMenu" > Countdowns </a> <a href="/category/javascript/database-abstractions" target="_self" data-turbo="true" class="shared-global_header-categories_mobile_menu_component__link shared-global_header-categories_mobile_menu_component__sub" data-action="click->mobile-menu#closeMenu" > Database Abstractions </a> <a href="/category/javascript/forms" target="_self" data-turbo="true" class="shared-global_header-categories_mobile_menu_component__link shared-global_header-categories_mobile_menu_component__sub" data-action="click->mobile-menu#closeMenu" > Forms </a> <a href="/category/javascript/images-and-media" target="_self" data-turbo="true" class="shared-global_header-categories_mobile_menu_component__link shared-global_header-categories_mobile_menu_component__sub" data-action="click->mobile-menu#closeMenu" > Images and Media </a> <a href="/category/javascript/loaders-and-uploaders" target="_self" data-turbo="true" class="shared-global_header-categories_mobile_menu_component__link shared-global_header-categories_mobile_menu_component__sub" data-action="click->mobile-menu#closeMenu" > Loaders and Uploaders </a> <a href="/category/javascript/media" target="_self" data-turbo="true" class="shared-global_header-categories_mobile_menu_component__link shared-global_header-categories_mobile_menu_component__sub" data-action="click->mobile-menu#closeMenu" > Media </a> <a href="/category/javascript/navigation" target="_self" data-turbo="true" class="shared-global_header-categories_mobile_menu_component__link shared-global_header-categories_mobile_menu_component__sub" data-action="click->mobile-menu#closeMenu" > Navigation </a> <a href="/category/javascript/news-tickers" target="_self" data-turbo="true" class="shared-global_header-categories_mobile_menu_component__link shared-global_header-categories_mobile_menu_component__sub" data-action="click->mobile-menu#closeMenu" > News Tickers </a> <a href="/category/javascript/project-management-tools" target="_self" data-turbo="true" class="shared-global_header-categories_mobile_menu_component__link shared-global_header-categories_mobile_menu_component__sub" data-action="click->mobile-menu#closeMenu" > Project Management Tools </a> <a href="/category/javascript/ratings-and-charts" target="_self" data-turbo="true" class="shared-global_header-categories_mobile_menu_component__link shared-global_header-categories_mobile_menu_component__sub" data-action="click->mobile-menu#closeMenu" > Ratings and Charts </a> <a href="/category/javascript/shopping-carts" target="_self" data-turbo="true" class="shared-global_header-categories_mobile_menu_component__link shared-global_header-categories_mobile_menu_component__sub" data-action="click->mobile-menu#closeMenu" > Shopping Carts </a> <a href="/category/javascript/sliders" target="_self" data-turbo="true" class="shared-global_header-categories_mobile_menu_component__link shared-global_header-categories_mobile_menu_component__sub" data-action="click->mobile-menu#closeMenu" > Sliders </a> <a href="/category/javascript/social-networks" target="_self" data-turbo="true" class="shared-global_header-categories_mobile_menu_component__link shared-global_header-categories_mobile_menu_component__sub" data-action="click->mobile-menu#closeMenu" > Social Networks </a> <a href="/category/javascript/miscellaneous" target="_self" data-turbo="true" class="shared-global_header-categories_mobile_menu_component__link shared-global_header-categories_mobile_menu_component__sub" data-action="click->mobile-menu#closeMenu" > Miscellaneous </a> </nav> </div> <div data-controller="toggler"> <a class="shared-global_header-categories_mobile_menu_component__linkRow" href="/category/css" data-turbo="true" data-action="click->toggler#toggle" data-toggler-target="toggle" data-toggler-expanded-class="shared-global_header-categories_mobile_menu_component__expanded" target="_self" > <div class="shared-global_header-categories_mobile_menu_component__link shared-global_header-categories_mobile_menu_component__linkRow"> CSS </div> <div class="shared-global_header-categories_mobile_menu_component__icon"> <svg width='100%' height='100%'> <use xlink:href='/storefront/assets/icon_spritesheet-2c8173174a30370958101e9b5e0dc4a0503c16573b4e2c0961245849681b052e.svg#arrow_fill_down'></use> </svg> </div> </a> <nav data-toggler-target="toggle" data-toggler-expanded-class="shared-global_header-categories_mobile_menu_component__expanded" class="shared-global_header-categories_mobile_menu_component__subLinks"> <a href="/category/css" target="_self" data-turbo="false" class="shared-global_header-categories_mobile_menu_component__link shared-global_header-categories_mobile_menu_component__sub" data-action="click->mobile-menu#closeMenu" > Show all CSS </a> <a href="/popular_item/by_category?category=css" target="_self" data-turbo="true" class="shared-global_header-categories_mobile_menu_component__link shared-global_header-categories_mobile_menu_component__sub" data-action="click->mobile-menu#closeMenu" > Popular Items </a> <a href="/category/css/animations-and-effects" target="_self" data-turbo="true" class="shared-global_header-categories_mobile_menu_component__link shared-global_header-categories_mobile_menu_component__sub" data-action="click->mobile-menu#closeMenu" > Animations and Effects </a> <a href="/category/css/buttons" target="_self" data-turbo="true" class="shared-global_header-categories_mobile_menu_component__link shared-global_header-categories_mobile_menu_component__sub" data-action="click->mobile-menu#closeMenu" > Buttons </a> <a href="/category/css/charts-and-graphs" target="_self" data-turbo="true" class="shared-global_header-categories_mobile_menu_component__link shared-global_header-categories_mobile_menu_component__sub" data-action="click->mobile-menu#closeMenu" > Charts and Graphs </a> <a href="/category/css/forms" target="_self" data-turbo="true" class="shared-global_header-categories_mobile_menu_component__link shared-global_header-categories_mobile_menu_component__sub" data-action="click->mobile-menu#closeMenu" > Forms </a> <a href="/category/css/layouts" target="_self" data-turbo="true" class="shared-global_header-categories_mobile_menu_component__link shared-global_header-categories_mobile_menu_component__sub" data-action="click->mobile-menu#closeMenu" > Layouts </a> <a href="/category/css/navigation-and-menus" target="_self" data-turbo="true" class="shared-global_header-categories_mobile_menu_component__link shared-global_header-categories_mobile_menu_component__sub" data-action="click->mobile-menu#closeMenu" > Navigation and Menus </a> <a href="/category/css/pricing-tables" target="_self" data-turbo="true" class="shared-global_header-categories_mobile_menu_component__link shared-global_header-categories_mobile_menu_component__sub" data-action="click->mobile-menu#closeMenu" > Pricing Tables </a> <a href="/category/css/tabs-and-sliders" target="_self" data-turbo="true" class="shared-global_header-categories_mobile_menu_component__link shared-global_header-categories_mobile_menu_component__sub" data-action="click->mobile-menu#closeMenu" > Tabs and Sliders </a> <a href="/category/css/miscellaneous" target="_self" data-turbo="true" class="shared-global_header-categories_mobile_menu_component__link shared-global_header-categories_mobile_menu_component__sub" data-action="click->mobile-menu#closeMenu" > Miscellaneous </a> </nav> </div> <div data-controller="toggler"> <a class="shared-global_header-categories_mobile_menu_component__linkRow" href="/category/mobile" data-turbo="true" data-action="click->toggler#toggle" data-toggler-target="toggle" data-toggler-expanded-class="shared-global_header-categories_mobile_menu_component__expanded" target="_self" > <div class="shared-global_header-categories_mobile_menu_component__link shared-global_header-categories_mobile_menu_component__linkRow"> Mobile </div> <div class="shared-global_header-categories_mobile_menu_component__icon"> <svg width='100%' height='100%'> <use xlink:href='/storefront/assets/icon_spritesheet-2c8173174a30370958101e9b5e0dc4a0503c16573b4e2c0961245849681b052e.svg#arrow_fill_down'></use> </svg> </div> </a> <nav data-toggler-target="toggle" data-toggler-expanded-class="shared-global_header-categories_mobile_menu_component__expanded" class="shared-global_header-categories_mobile_menu_component__subLinks"> <a href="/category/mobile" target="_self" data-turbo="false" class="shared-global_header-categories_mobile_menu_component__link shared-global_header-categories_mobile_menu_component__sub" data-action="click->mobile-menu#closeMenu" > Show all Mobile </a> <a href="/popular_item/by_category?category=mobile" target="_self" data-turbo="true" class="shared-global_header-categories_mobile_menu_component__link shared-global_header-categories_mobile_menu_component__sub" data-action="click->mobile-menu#closeMenu" > Popular Items </a> <a href="/category/mobile/android" target="_self" data-turbo="true" class="shared-global_header-categories_mobile_menu_component__link shared-global_header-categories_mobile_menu_component__sub" data-action="click->mobile-menu#closeMenu" > Android </a> <a href="/category/mobile/flutter" target="_self" data-turbo="true" class="shared-global_header-categories_mobile_menu_component__link shared-global_header-categories_mobile_menu_component__sub" data-action="click->mobile-menu#closeMenu" > Flutter </a> <a href="/category/mobile/ios" target="_self" data-turbo="true" class="shared-global_header-categories_mobile_menu_component__link shared-global_header-categories_mobile_menu_component__sub" data-action="click->mobile-menu#closeMenu" > iOS </a> <a href="/category/mobile/native-web" target="_self" data-turbo="true" class="shared-global_header-categories_mobile_menu_component__link shared-global_header-categories_mobile_menu_component__sub" data-action="click->mobile-menu#closeMenu" > Native Web </a> <a href="/category/mobile/titanium" target="_self" data-turbo="true" class="shared-global_header-categories_mobile_menu_component__link shared-global_header-categories_mobile_menu_component__sub" data-action="click->mobile-menu#closeMenu" > Titanium </a> </nav> </div> <div data-controller="toggler"> <a class="shared-global_header-categories_mobile_menu_component__linkRow" href="/category/html5" data-turbo="true" data-action="click->toggler#toggle" data-toggler-target="toggle" data-toggler-expanded-class="shared-global_header-categories_mobile_menu_component__expanded" target="_self" > <div class="shared-global_header-categories_mobile_menu_component__link shared-global_header-categories_mobile_menu_component__linkRow"> HTML5 </div> <div class="shared-global_header-categories_mobile_menu_component__icon"> <svg width='100%' height='100%'> <use xlink:href='/storefront/assets/icon_spritesheet-2c8173174a30370958101e9b5e0dc4a0503c16573b4e2c0961245849681b052e.svg#arrow_fill_down'></use> </svg> </div> </a> <nav data-toggler-target="toggle" data-toggler-expanded-class="shared-global_header-categories_mobile_menu_component__expanded" class="shared-global_header-categories_mobile_menu_component__subLinks"> <a href="/category/html5" target="_self" data-turbo="false" class="shared-global_header-categories_mobile_menu_component__link shared-global_header-categories_mobile_menu_component__sub" data-action="click->mobile-menu#closeMenu" > Show all HTML5 </a> <a href="/popular_item/by_category?category=html5" target="_self" data-turbo="true" class="shared-global_header-categories_mobile_menu_component__link shared-global_header-categories_mobile_menu_component__sub" data-action="click->mobile-menu#closeMenu" > Popular Items </a> <a href="/category/html5/3d" target="_self" data-turbo="true" class="shared-global_header-categories_mobile_menu_component__link shared-global_header-categories_mobile_menu_component__sub" data-action="click->mobile-menu#closeMenu" > 3D </a> <a href="/category/html5/ad-templates" target="_self" data-turbo="true" class="shared-global_header-categories_mobile_menu_component__link shared-global_header-categories_mobile_menu_component__sub" data-action="click->mobile-menu#closeMenu" > Ad Templates </a> <a href="/category/html5/canvas" target="_self" data-turbo="true" class="shared-global_header-categories_mobile_menu_component__link shared-global_header-categories_mobile_menu_component__sub" data-action="click->mobile-menu#closeMenu" > Canvas </a> <a href="/category/html5/charts-and-graphs" target="_self" data-turbo="true" class="shared-global_header-categories_mobile_menu_component__link shared-global_header-categories_mobile_menu_component__sub" data-action="click->mobile-menu#closeMenu" > Charts and Graphs </a> <a href="/category/html5/forms" target="_self" data-turbo="true" class="shared-global_header-categories_mobile_menu_component__link shared-global_header-categories_mobile_menu_component__sub" data-action="click->mobile-menu#closeMenu" > Forms </a> <a href="/category/html5/games" target="_self" data-turbo="true" class="shared-global_header-categories_mobile_menu_component__link shared-global_header-categories_mobile_menu_component__sub" data-action="click->mobile-menu#closeMenu" > Games </a> <a href="/category/html5/libraries" target="_self" data-turbo="true" class="shared-global_header-categories_mobile_menu_component__link shared-global_header-categories_mobile_menu_component__sub" data-action="click->mobile-menu#closeMenu" > Libraries </a> <a href="/category/html5/media" target="_self" data-turbo="true" class="shared-global_header-categories_mobile_menu_component__link shared-global_header-categories_mobile_menu_component__sub" data-action="click->mobile-menu#closeMenu" > Media </a> <a href="/category/html5/presentations" target="_self" data-turbo="true" class="shared-global_header-categories_mobile_menu_component__link shared-global_header-categories_mobile_menu_component__sub" data-action="click->mobile-menu#closeMenu" > Presentations </a> <a href="/category/html5/sliders" target="_self" data-turbo="true" class="shared-global_header-categories_mobile_menu_component__link shared-global_header-categories_mobile_menu_component__sub" data-action="click->mobile-menu#closeMenu" > Sliders </a> <a href="/category/html5/storage" target="_self" data-turbo="true" class="shared-global_header-categories_mobile_menu_component__link shared-global_header-categories_mobile_menu_component__sub" data-action="click->mobile-menu#closeMenu" > Storage </a> <a href="/category/html5/templates" target="_self" data-turbo="true" class="shared-global_header-categories_mobile_menu_component__link shared-global_header-categories_mobile_menu_component__sub" data-action="click->mobile-menu#closeMenu" > Templates </a> <a href="/category/html5/miscellaneous" target="_self" data-turbo="true" class="shared-global_header-categories_mobile_menu_component__link shared-global_header-categories_mobile_menu_component__sub" data-action="click->mobile-menu#closeMenu" > Miscellaneous </a> </nav> </div> <div data-controller="toggler"> <a class="shared-global_header-categories_mobile_menu_component__linkRow" href="/search/ai" data-turbo="true" data-action="click->toggler#toggle" data-toggler-target="toggle" data-toggler-expanded-class="shared-global_header-categories_mobile_menu_component__expanded" target="_self" > <div class="shared-global_header-categories_mobile_menu_component__link shared-global_header-categories_mobile_menu_component__linkRow"> AI Tools </div> <div class="shared-global_header-categories_mobile_menu_component__icon"> <svg width='100%' height='100%'> <use xlink:href='/storefront/assets/icon_spritesheet-2c8173174a30370958101e9b5e0dc4a0503c16573b4e2c0961245849681b052e.svg#arrow_fill_down'></use> </svg> </div> </a> <nav data-toggler-target="toggle" data-toggler-expanded-class="shared-global_header-categories_mobile_menu_component__expanded" class="shared-global_header-categories_mobile_menu_component__subLinks"> <a href="/search/ai" target="_self" data-turbo="false" class="shared-global_header-categories_mobile_menu_component__link shared-global_header-categories_mobile_menu_component__sub" data-action="click->mobile-menu#closeMenu" > Show all AI Tools </a> <a href="/search/ai?sort=sales" target="_self" data-turbo="true" class="shared-global_header-categories_mobile_menu_component__link shared-global_header-categories_mobile_menu_component__sub" data-action="click->mobile-menu#closeMenu" > Popular Items </a> <a href="/search/ai%20content" target="_self" data-turbo="true" class="shared-global_header-categories_mobile_menu_component__link shared-global_header-categories_mobile_menu_component__sub" data-action="click->mobile-menu#closeMenu" > AI Writers and Content Generators </a> <a href="/search/ai%20image" target="_self" data-turbo="true" class="shared-global_header-categories_mobile_menu_component__link shared-global_header-categories_mobile_menu_component__sub" data-action="click->mobile-menu#closeMenu" > AI Image and Video Generators </a> <a href="/search/ai%20chat" target="_self" data-turbo="true" class="shared-global_header-categories_mobile_menu_component__link shared-global_header-categories_mobile_menu_component__sub" data-action="click->mobile-menu#closeMenu" > AI Chatbots </a> </nav> </div> <div data-controller="toggler"> <a class="shared-global_header-categories_mobile_menu_component__linkRow" href="https://themeforest.net/category/wordpress" data-turbo="false" data-action="click->mobile-menu#closeMenu" data-toggler-target="toggle" data-toggler-expanded-class="shared-global_header-categories_mobile_menu_component__expanded" target="_self" > <div class="shared-global_header-categories_mobile_menu_component__link shared-global_header-categories_mobile_menu_component__linkRow shared-global_header-categories_mobile_menu_component__empty"> WP Themes </div> </a> </div> <div data-controller="toggler"> <a class="shared-global_header-categories_mobile_menu_component__linkRow" href="/category/plugins" data-turbo="true" data-action="click->toggler#toggle" data-toggler-target="toggle" data-toggler-expanded-class="shared-global_header-categories_mobile_menu_component__expanded" target="_self" > <div class="shared-global_header-categories_mobile_menu_component__link shared-global_header-categories_mobile_menu_component__linkRow"> Plugins </div> <div class="shared-global_header-categories_mobile_menu_component__icon"> <svg width='100%' height='100%'> <use xlink:href='/storefront/assets/icon_spritesheet-2c8173174a30370958101e9b5e0dc4a0503c16573b4e2c0961245849681b052e.svg#arrow_fill_down'></use> </svg> </div> </a> <nav data-toggler-target="toggle" data-toggler-expanded-class="shared-global_header-categories_mobile_menu_component__expanded" class="shared-global_header-categories_mobile_menu_component__subLinks"> <a href="/category/plugins" target="_self" data-turbo="false" class="shared-global_header-categories_mobile_menu_component__link shared-global_header-categories_mobile_menu_component__sub" data-action="click->mobile-menu#closeMenu" > Show all Plugins </a> <a href="/popular_item/by_category?category=plugins" target="_self" data-turbo="true" class="shared-global_header-categories_mobile_menu_component__link shared-global_header-categories_mobile_menu_component__sub" data-action="click->mobile-menu#closeMenu" > Popular Items </a> <a href="/category/plugins/concrete5" target="_self" data-turbo="true" class="shared-global_header-categories_mobile_menu_component__link shared-global_header-categories_mobile_menu_component__sub" data-action="click->mobile-menu#closeMenu" > Concrete5 </a> <a href="/category/plugins/drupal" target="_self" data-turbo="true" class="shared-global_header-categories_mobile_menu_component__link shared-global_header-categories_mobile_menu_component__sub" data-action="click->mobile-menu#closeMenu" > Drupal </a> <a href="/category/plugins/expressionengine" target="_self" data-turbo="true" class="shared-global_header-categories_mobile_menu_component__link shared-global_header-categories_mobile_menu_component__sub" data-action="click->mobile-menu#closeMenu" > ExpressionEngine </a> <a href="/category/plugins/joomla" target="_self" data-turbo="true" class="shared-global_header-categories_mobile_menu_component__link shared-global_header-categories_mobile_menu_component__sub" data-action="click->mobile-menu#closeMenu" > Joomla </a> <a href="/category/plugins/magento-extensions" target="_self" data-turbo="true" class="shared-global_header-categories_mobile_menu_component__link shared-global_header-categories_mobile_menu_component__sub" data-action="click->mobile-menu#closeMenu" > Magento Extensions </a> <a href="/category/plugins/muse-widgets" target="_self" data-turbo="true" class="shared-global_header-categories_mobile_menu_component__link shared-global_header-categories_mobile_menu_component__sub" data-action="click->mobile-menu#closeMenu" > Muse Widgets </a> <a href="/category/plugins/opencart" target="_self" data-turbo="true" class="shared-global_header-categories_mobile_menu_component__link shared-global_header-categories_mobile_menu_component__sub" data-action="click->mobile-menu#closeMenu" > OpenCart </a> <a href="/category/plugins/oscommerce" target="_self" data-turbo="true" class="shared-global_header-categories_mobile_menu_component__link shared-global_header-categories_mobile_menu_component__sub" data-action="click->mobile-menu#closeMenu" > osCommerce </a> <a href="/category/plugins/prestashop" target="_self" data-turbo="true" class="shared-global_header-categories_mobile_menu_component__link shared-global_header-categories_mobile_menu_component__sub" data-action="click->mobile-menu#closeMenu" > Prestashop </a> <a href="/category/plugins/ubercart" target="_self" data-turbo="true" class="shared-global_header-categories_mobile_menu_component__link shared-global_header-categories_mobile_menu_component__sub" data-action="click->mobile-menu#closeMenu" > Ubercart </a> <a href="/category/plugins/virtuemart" target="_self" data-turbo="true" class="shared-global_header-categories_mobile_menu_component__link shared-global_header-categories_mobile_menu_component__sub" data-action="click->mobile-menu#closeMenu" > VirtueMart </a> <a href="/category/plugins/zen-cart" target="_self" data-turbo="true" class="shared-global_header-categories_mobile_menu_component__link shared-global_header-categories_mobile_menu_component__sub" data-action="click->mobile-menu#closeMenu" > Zen Cart </a> <a href="/category/plugins/miscellaneous" target="_self" data-turbo="true" class="shared-global_header-categories_mobile_menu_component__link shared-global_header-categories_mobile_menu_component__sub" data-action="click->mobile-menu#closeMenu" > Miscellaneous </a> </nav> </div> <div data-controller="toggler"> <a class="shared-global_header-categories_mobile_menu_component__linkRow" href="https://placeit.net/mockup-generator?utm_source=envatomarket&utm_medium=promos&utm_campaign=placeit_mkt-menu-photos&utm_content=mockup_generator" data-turbo="false" data-action="click->mobile-menu#closeMenu" data-toggler-target="toggle" data-toggler-expanded-class="shared-global_header-categories_mobile_menu_component__expanded" target="_blank" > <div class="shared-global_header-categories_mobile_menu_component__link shared-global_header-categories_mobile_menu_component__linkRow shared-global_header-categories_mobile_menu_component__empty shared-global_header-categories_mobile_menu_component__linkExternal"> Mockup Generator </div> </a> </div> <div data-controller="toggler"> <a class="shared-global_header-categories_mobile_menu_component__linkRow" href="/category" data-turbo="false" data-action="click->toggler#toggle" data-toggler-target="toggle" data-toggler-expanded-class="shared-global_header-categories_mobile_menu_component__expanded" target="_self" > <div class="shared-global_header-categories_mobile_menu_component__link shared-global_header-categories_mobile_menu_component__linkRow"> More </div> <div class="shared-global_header-categories_mobile_menu_component__icon"> <svg width='100%' height='100%'> <use xlink:href='/storefront/assets/icon_spritesheet-2c8173174a30370958101e9b5e0dc4a0503c16573b4e2c0961245849681b052e.svg#arrow_fill_down'></use> </svg> </div> </a> <nav data-toggler-target="toggle" data-toggler-expanded-class="shared-global_header-categories_mobile_menu_component__expanded" class="shared-global_header-categories_mobile_menu_component__subLinks"> <a href="/category/net" target="_self" data-turbo="true" class="shared-global_header-categories_mobile_menu_component__link shared-global_header-categories_mobile_menu_component__sub" data-action="click->mobile-menu#closeMenu" > .NET </a> <a href="/category/apps" target="_self" data-turbo="true" class="shared-global_header-categories_mobile_menu_component__link shared-global_header-categories_mobile_menu_component__sub" data-action="click->mobile-menu#closeMenu" > Apps </a> <a href="/search?term=facebook&type=files" target="_self" data-turbo="true" class="shared-global_header-categories_mobile_menu_component__link shared-global_header-categories_mobile_menu_component__sub" data-action="click->mobile-menu#closeMenu" > Facebook </a> </nav> </div> <div data-controller="toggler"> <a class="shared-global_header-categories_mobile_menu_component__linkRow" href="https://elements.envato.com/?utm_campaign=elements_mkt-switcher_mobile_31JULY2024&utm_source=codecanyon.net&utm_medium=referral&utm_content=cc_home_unlimited" data-turbo="false" data-action="click->mobile-menu#closeMenu" data-toggler-target="toggle" data-toggler-expanded-class="shared-global_header-categories_mobile_menu_component__expanded" target="_blank" data-impression-tracker-target="promotion" data-analytics-view-payload="{"eventName":"view_promotion","eventType":"user","contextDetail":"site switcher","ecommerce":{"promotionId":"elements_mkt-switcher_mobile_31JULY2024","promotionName":"elements_mkt-switcher_mobile_31JULY2024","promotionType":"elements referral"}}" data-analytics-click-payload="{"eventName":"select_promotion","eventType":"user","contextDetail":"site switcher","ecommerce":{"promotionId":"elements_mkt-switcher_mobile_31JULY2024","promotionName":"elements_mkt-switcher_mobile_31JULY2024","promotionType":"elements referral"}}" > <div class="shared-global_header-categories_mobile_menu_component__link shared-global_header-categories_mobile_menu_component__linkRow shared-global_header-categories_mobile_menu_component__empty shared-global_header-categories_mobile_menu_component__linkExternal shared-global_header-categories_mobile_menu_component__linkGradient"> Unlimited Downloads </div> </a> </div> </div> </div> </template> </div> <div class="shared-global_header-mobile_menu_component__offCanvasBackground" data-mobile-menu-target="userMenu"> <div class="shared-global_header-mobile_menu_component__overlay" data-action="click->mobile-menu#closeMenu"></div> <div class="shared-global_header-mobile_menu_component__offCanvasWrapper shared-global_header-mobile_menu_component__right"> <div class="shared-global_header-mobile_menu_component__offCanvasGuestUserMenuWrapper" data-controller="fragment-loader" data-fragment-loader-session-required-value="true" data-fragment-loader-url-value="/my/user_nav?mobile=true"> <a class="shared-global_header-mobile_menu_user_nav_component__link" href="/cart" data-turbo="false"> Guest Cart <span class="shared-global_header-mobile_menu_user_nav_component__iconWrapper"> <svg width='100%' height='100%'> <use xlink:href='/storefront/assets/icon_spritesheet-2c8173174a30370958101e9b5e0dc4a0503c16573b4e2c0961245849681b052e.svg#cart_mobile'></use> </svg> </span> <span class="shared-global_header-mobile_menu_user_nav_component__userCartCount" data-controller="cart-icon" data-action="cartStoreUpdated@window->cart-icon#updateFromStore" ></span> </a> <a class="shared-global_header-mobile_menu_user_nav_component__link" href="/sign_up?to=codecanyon" data-turbo="false"> Create an Envato Account <span class="shared-global_header-mobile_menu_user_nav_component__iconWrapper"> <svg width='100%' height='100%'> <use xlink:href='/storefront/assets/icon_spritesheet-2c8173174a30370958101e9b5e0dc4a0503c16573b4e2c0961245849681b052e.svg#envato_mobile_menu_logo'></use> </svg> </span > </a> <a class="shared-global_header-mobile_menu_user_nav_component__link" href="/sign_in?to=codecanyon" data-turbo="false"> Sign In <span class="shared-global_header-mobile_menu_user_nav_component__iconWrapper"> <svg width='100%' height='100%'> <use xlink:href='/storefront/assets/icon_spritesheet-2c8173174a30370958101e9b5e0dc4a0503c16573b4e2c0961245849681b052e.svg#envato_mobile_login'></use> </svg> </span > </a> </div> </div> </div> </div> <div class="shared-global_header-markets_nav_component__headerBottomWrapper"> <div class="shared-global_header-markets_nav_component__gridWide"> <nav aria-label="markets" class="shared-global_header-markets_nav_component__navWithLabelWrapper"> <a class="shared-global_header-markets_nav_component__siteLink" href="https://themeforest.net/?auto_signin=true">Web Themes & Templates</a> <a class="shared-global_header-markets_nav_component__siteLink shared-global_header-markets_nav_component__active" href="https://codecanyon.net/?auto_signin=true">Code</a> <a class="shared-global_header-markets_nav_component__siteLink" href="https://videohive.net/?auto_signin=true">Video</a> <a class="shared-global_header-markets_nav_component__siteLink" href="https://audiojungle.net/?auto_signin=true">Audio</a> <a class="shared-global_header-markets_nav_component__siteLink" href="https://graphicriver.net/?auto_signin=true">Graphics</a> <a class="shared-global_header-markets_nav_component__siteLink" href="https://photodune.net/?auto_signin=true">Photos</a> <a class="shared-global_header-markets_nav_component__siteLink" href="https://3docean.net/?auto_signin=true">3D Files</a> <div class="shared-global_header-elements_nav_component__root" data-analytics-click-payload="{"eventName":"select_promotion","eventType":"user","contextDetail":"site switcher","ecommerce":{"promotionId":"elements_mkt-switcher_31JUL2024","promotionName":"elements_mkt-switcher_31JUL2024","promotionType":"elements referral"}}" > <a class="shared-global_header-elements_nav_component__mainLink" href="https://elements.envato.com/?utm_campaign=elements_mkt-switcher_31JUL2024&utm_medium=referral&utm_source=codecanyon.net&utm_content=cc_search" target="_blank" > <span> Unlimited Downloads </span> </a> <div class="shared-global_header-elements_nav_component__dropdownContainer shared-global_header-elements_nav_component__uniqueSellingPointVariant" data-impression-tracker-target="promotion" data-analytics-view-payload="{"eventName":"view_promotion","eventType":"user","contextDetail":"site switcher","ecommerce":{"promotionId":"elements_mkt-switcher_31JUL2024","promotionName":"elements_mkt-switcher_31JUL2024","promotionType":"elements referral"}}" > <div class="shared-global_header-elements_nav_component__mainPanel"> <a class="shared-global_header-elements_nav_component__mainPanelLink" href="https://elements.envato.com/?utm_campaign=elements_mkt-switcher_31JUL2024&utm_medium=referral&utm_source=codecanyon.net&utm_content=cc_search" target="_blank" > <div> <img class="shared-global_header-elements_nav_component__elementsLogo" loading="lazy" src="https://assets.market-storefront.envato-static.com/storefront/assets/logos/envato-elements-e1a82c06abeaebefed5ef0159102a06cd996de649ea62018b395978c09cd1edc.svg" alt="Elements logo"> </div> <div class="shared-global_header-elements_nav_component__mainPanelLinkContainer"> <div class="shared-global_header-elements_nav_component__mainPanelLinkHeading"> <h2 class="shared-brand_neue-text_component__root shared-brand_neue-text_component__subheading shared-brand_neue-text_component__contentPrimary shared-brand_neue-text_component__fontWeightUnset"> Looking for unlimited downloads? </h2> </div> <div class="shared-global_header-elements_nav_component__mainPanelLinkSubheading"> <span class="shared-brand_neue-text_component__root shared-brand_neue-text_component__bodySmall shared-brand_neue-text_component__contentPrimary"> Subscribe to Envato Elements. </span> </div> <div class="shared-global_header-elements_nav_component__mainPanelLinkDescriptionContainer"> <div class="shared-global_header-elements_nav_component__mainPanelLinkDescription"> <img class="shared-brand_neue-icon_component__root shared-brand_neue-icon_component__size20" src="https://assets.market-storefront.envato-static.com/storefront/assets/icons/badge-ea3a60ea39171409e4f531bab81dc0a0f23d5ab62c5bbc2160599b766c5803dd.svg" alt="badge" > <span class="shared-brand_neue-text_component__root shared-brand_neue-text_component__bodySmall shared-brand_neue-text_component__contentPrimary"> Millions of premium assets </span> </div> <div class="shared-global_header-elements_nav_component__mainPanelLinkDescription"> <img class="shared-brand_neue-icon_component__root shared-brand_neue-icon_component__size20" src="https://assets.market-storefront.envato-static.com/storefront/assets/icons/thumbs_up-3314bbeb196f5f1858b98256fe14b1bbe632f6b4077d311139e8173f3cfc2945.svg" alt="thumbs up" > <span class="shared-brand_neue-text_component__root shared-brand_neue-text_component__bodySmall shared-brand_neue-text_component__contentPrimary"> Great value subscription </span> </div> </div> </div> </a> <a rel="noopener" target="_blank" class="shared-brand_neue-button_link_component__root shared-brand_neue-button_link_component__banner" href="https://elements.envato.com/?utm_campaign=elements_mkt-switcher_31JUL2024&utm_medium=referral&utm_source=codecanyon.net&utm_content=cc_search"> <span class="shared-brand_neue-text_component__root shared-brand_neue-text_component__labelSmall shared-brand_neue-text_component__contentPrimary"> Let's create </span> <img class="shared-brand_neue-icon_component__root shared-brand_neue-icon_component__size14" src="https://assets.market-storefront.envato-static.com/storefront/assets/icons/open_in_new-235ba8f2a9a16ac0776b9a33ffaa20b59f6f5454ee41ef5bac6e83437b6d8482.svg" alt="open elements" > </a> </div> <div class="shared-global_header-elements_nav_component__secondaryPanel"> <a href="https://elements.envato.com/?utm_campaign=elements_mkt-switcher_31JUL2024&utm_medium=referral&utm_source=codecanyon.net&utm_content=cc_search" target="_blank" > <img loading="lazy" src="https://assets.market-storefront.envato-static.com/storefront/assets/header/items-collage-1x-433d6111167086808c9d1f15a1fe151d2ff7f9af185d78728e1a15bb6886d23f.png" srcset="https://assets.market-storefront.envato-static.com/storefront/assets/header/items-collage-2x-0a4d4fb7c56c891a5012749dfe7b4b55170e907b2822a83a626c2b41bd233cee.png 2x" alt="Collage of Elements items" > </a> </div> </div> </div> <div class="shared-global_header-markets_nav_component__siteLogoWrapper"> <picture> <source srcset="https://assets.market-storefront.envato-static.com/storefront/assets/logos/codecanyon-09299c50d79dfe5cf129eeceacec330b0ee24ed7bf51a19aea3cb0112e2d4de0.webp" type="image/webp"> <img src="https://assets.market-storefront.envato-static.com/storefront/assets/logos/codecanyon-f02914a18facfc9c3d14d4028cd87731c1541c11c16a891831b8bce05f92b4d8.png" alt="CodeCanyon" class="shared-global_header-markets_nav_component__siteLogo" width="115"> </picture> </div> </nav> </div> </div> </div> <div class="shared-global_header-global_header_component__headerCategoriesWrapper"> <div class="shared-global_header-global_header_component__headerCategories"> <div class="shared-global_header-global_header_component__gridWide"> <nav class="shared-global_header-categories_menu_component__linksList" aria-label="categories"> <div class="shared-global_header-categories_menu_component__menuItem"> <a data-turbo="true" class="shared-global_header-categories_menu_component__link shared-global_header-categories_menu_component__link" href="/category/all"> All Items </a> <div class="shared-global_header-categories_menu_component__dropdownContainer"> <nav class="shared-global_header-categories_menu_component__dropdown"> <a data-turbo="true" href="/top-sellers">Popular Files</a> <a data-turbo="true" href="/feature">Featured Files</a> <a data-turbo="true" href="/search?date=this-month&sort=sales">Top New Files</a> <a data-turbo="false" href="/follow_feed">Follow Feed</a> <a data-turbo="false" href="/authors/top">Top Authors</a> <a data-turbo="false" href="/page/top_new_sellers">Top New Authors</a> <a data-turbo="false" href="/collections">Public Collections</a> <a data-turbo="false" href="/category">View All Categories</a> </nav> </div> </div> <div class="shared-global_header-categories_menu_component__menuItem"> <a data-turbo="true" class="shared-global_header-categories_menu_component__link shared-global_header-categories_menu_component__link" href="/category/php-scripts"> PHP Scripts </a> <div class="shared-global_header-categories_menu_component__dropdownContainer"> <nav class="shared-global_header-categories_menu_component__dropdown"> <a class="shared-global_header-categories_menu_component__dropdownTop" data-turbo="true" href="/popular_item/by_category?category=php-scripts">Popular Items</a> <a data-turbo="true" href="/category/php-scripts/add-ons">Add-ons</a> <a data-turbo="true" href="/category/php-scripts/calendars">Calendars</a> <a data-turbo="true" href="/category/php-scripts/countdowns">Countdowns</a> <a data-turbo="true" href="/category/php-scripts/database-abstractions">Database Abstractions</a> <a data-turbo="true" href="/category/php-scripts/forms">Forms</a> <a data-turbo="true" href="/category/php-scripts/help-and-support-tools">Help and Support Tools</a> <a data-turbo="true" href="/category/php-scripts/images-and-media">Images and Media</a> <a data-turbo="true" href="/category/php-scripts/loaders-and-uploaders">Loaders and Uploaders</a> <a data-turbo="true" href="/category/php-scripts/navigation">Navigation</a> <a data-turbo="true" href="/category/php-scripts/news-tickers">News Tickers</a> <a data-turbo="true" href="/category/php-scripts/polls">Polls</a> <a data-turbo="true" href="/category/php-scripts/project-management-tools">Project Management Tools</a> <a data-turbo="true" href="/category/php-scripts/ratings-and-charts">Ratings and Charts</a> <a data-turbo="true" href="/category/php-scripts/search">Search</a> <a data-turbo="true" href="/category/php-scripts/shopping-carts">Shopping Carts</a> <a data-turbo="true" href="/category/php-scripts/social-networking">Social Networking</a> <a data-turbo="true" href="/category/php-scripts/miscellaneous">Miscellaneous</a> </nav> </div> </div> <div class="shared-global_header-categories_menu_component__menuItem"> <a data-turbo="true" class="shared-global_header-categories_menu_component__link shared-global_header-categories_menu_component__link" href="/category/wordpress"> WordPress </a> <div class="shared-global_header-categories_menu_component__dropdownContainer"> <nav class="shared-global_header-categories_menu_component__dropdown"> <a class="shared-global_header-categories_menu_component__dropdownTop" data-turbo="true" href="/popular_item/by_category?category=wordpress">Popular Items</a> <a data-turbo="true" href="/category/wordpress/add-ons">Add-ons</a> <a data-turbo="true" href="/category/wordpress/advertising">Advertising</a> <a data-turbo="true" href="/category/wordpress/calendars">Calendars</a> <a data-turbo="true" href="/category/wordpress/ecommerce">eCommerce</a> <a data-turbo="true" href="/attributes/compatible-with/elementor">Elementor</a> <a data-turbo="true" href="/category/wordpress/forms">Forms</a> <a data-turbo="true" href="/category/wordpress/forums">Forums</a> <a data-turbo="true" href="/category/wordpress/galleries">Galleries</a> <a data-turbo="true" href="/category/wordpress/interface-elements">Interface Elements</a> <a data-turbo="true" href="/category/wordpress/media">Media</a> <a data-turbo="true" href="/category/wordpress/membership">Membership</a> <a data-turbo="true" href="/category/wordpress/newsletters">Newsletters</a> <a data-turbo="true" href="/category/wordpress/seo">SEO</a> <a data-turbo="true" href="/category/wordpress/social-networking">Social Networking</a> <a data-turbo="true" href="/category/wordpress/utilities">Utilities</a> <a data-turbo="true" href="/category/wordpress/widgets">Widgets</a> <a data-turbo="true" href="/category/wordpress/miscellaneous">Miscellaneous</a> <a class="shared-global_header-categories_menu_component__dropdownBottom" data-turbo="false" href="https://themeforest.net/category/wordpress">WordPress Themes on ThemeForest</a> </nav> </div> </div> <div class="shared-global_header-categories_menu_component__menuItem"> <a data-turbo="true" class="shared-global_header-categories_menu_component__link shared-global_header-categories_menu_component__link" href="/search/ecommerce"> eCommerce </a> <div class="shared-global_header-categories_menu_component__dropdownContainer"> <nav class="shared-global_header-categories_menu_component__dropdown"> <a data-turbo="true" href="/search?compatible_with=Easy+Digital+Downloads">Easy Digital Downloads</a> <a data-turbo="true" href="/category/wordpress/ecommerce/jigoshop">Jigoshop</a> <a data-turbo="true" href="/category/plugins/magento-extensions">Magento Extensions</a> <a data-turbo="true" href="/category/plugins/opencart">OpenCart</a> <a data-turbo="true" href="/category/plugins/oscommerce">osCommerce</a> <a data-turbo="true" href="/category/plugins/prestashop">Prestashop</a> <a data-turbo="true" href="/category/plugins/ubercart">UberCart</a> <a data-turbo="true" href="/category/plugins/virtuemart">VirtueMart</a> <a data-turbo="true" href="/category/wordpress/ecommerce/woocommerce">WooCommerce</a> <a data-turbo="true" href="/category/wordpress/ecommerce/wp-e-commerce">WP e-Commerce</a> <a data-turbo="true" href="/category/wordpress/ecommerce/standalone">WP Standalone</a> <a data-turbo="true" href="/category/plugins/zen-cart">Zen Cart</a> <a data-turbo="true" href="/category/wordpress/ecommerce/miscellaneous">Miscellaneous</a> </nav> </div> </div> <div class="shared-global_header-categories_menu_component__menuItem"> <a data-turbo="true" class="shared-global_header-categories_menu_component__link shared-global_header-categories_menu_component__link" href="/category/javascript"> JavaScript </a> <div class="shared-global_header-categories_menu_component__dropdownContainer"> <nav class="shared-global_header-categories_menu_component__dropdown"> <a class="shared-global_header-categories_menu_component__dropdownTop" data-turbo="true" href="/popular_item/by_category?category=javascript">Popular Items</a> <a data-turbo="true" href="/category/javascript/animated-svgs">Animated SVGs</a> <a data-turbo="true" href="/category/javascript/calendars">Calendars</a> <a data-turbo="true" href="/category/javascript/countdowns">Countdowns</a> <a data-turbo="true" href="/category/javascript/database-abstractions">Database Abstractions</a> <a data-turbo="true" href="/category/javascript/forms">Forms</a> <a data-turbo="true" href="/category/javascript/images-and-media">Images and Media</a> <a data-turbo="true" href="/category/javascript/loaders-and-uploaders">Loaders and Uploaders</a> <a data-turbo="true" href="/category/javascript/media">Media</a> <a data-turbo="true" href="/category/javascript/navigation">Navigation</a> <a data-turbo="true" href="/category/javascript/news-tickers">News Tickers</a> <a data-turbo="true" href="/category/javascript/project-management-tools">Project Management Tools</a> <a data-turbo="true" href="/category/javascript/ratings-and-charts">Ratings and Charts</a> <a data-turbo="true" href="/category/javascript/shopping-carts">Shopping Carts</a> <a data-turbo="true" href="/category/javascript/sliders">Sliders</a> <a data-turbo="true" href="/category/javascript/social-networks">Social Networks</a> <a data-turbo="true" href="/category/javascript/miscellaneous">Miscellaneous</a> </nav> </div> </div> <div class="shared-global_header-categories_menu_component__menuItem"> <a data-turbo="true" class="shared-global_header-categories_menu_component__link shared-global_header-categories_menu_component__link" href="/category/css"> CSS </a> <div class="shared-global_header-categories_menu_component__dropdownContainer"> <nav class="shared-global_header-categories_menu_component__dropdown"> <a class="shared-global_header-categories_menu_component__dropdownTop" data-turbo="true" href="/popular_item/by_category?category=css">Popular Items</a> <a data-turbo="true" href="/category/css/animations-and-effects">Animations and Effects</a> <a data-turbo="true" href="/category/css/buttons">Buttons</a> <a data-turbo="true" href="/category/css/charts-and-graphs">Charts and Graphs</a> <a data-turbo="true" href="/category/css/forms">Forms</a> <a data-turbo="true" href="/category/css/layouts">Layouts</a> <a data-turbo="true" href="/category/css/navigation-and-menus">Navigation and Menus</a> <a data-turbo="true" href="/category/css/pricing-tables">Pricing Tables</a> <a data-turbo="true" href="/category/css/tabs-and-sliders">Tabs and Sliders</a> <a data-turbo="true" href="/category/css/miscellaneous">Miscellaneous</a> </nav> </div> </div> <div class="shared-global_header-categories_menu_component__menuItem"> <a data-turbo="true" class="shared-global_header-categories_menu_component__link shared-global_header-categories_menu_component__link" href="/category/mobile"> Mobile </a> <div class="shared-global_header-categories_menu_component__dropdownContainer"> <nav class="shared-global_header-categories_menu_component__dropdown"> <a class="shared-global_header-categories_menu_component__dropdownTop" data-turbo="true" href="/popular_item/by_category?category=mobile">Popular Items</a> <a data-turbo="true" href="/category/mobile/android">Android</a> <a data-turbo="true" href="/category/mobile/flutter">Flutter</a> <a data-turbo="true" href="/category/mobile/ios">iOS</a> <a data-turbo="true" href="/category/mobile/native-web">Native Web</a> <a data-turbo="true" href="/category/mobile/titanium">Titanium</a> </nav> </div> </div> <div class="shared-global_header-categories_menu_component__menuItem"> <a data-turbo="true" class="shared-global_header-categories_menu_component__link shared-global_header-categories_menu_component__link" href="/category/html5"> HTML5 </a> <div class="shared-global_header-categories_menu_component__dropdownContainer"> <nav class="shared-global_header-categories_menu_component__dropdown"> <a class="shared-global_header-categories_menu_component__dropdownTop" data-turbo="true" href="/popular_item/by_category?category=html5">Popular Items</a> <a data-turbo="true" href="/category/html5/3d">3D</a> <a data-turbo="true" href="/category/html5/ad-templates">Ad Templates</a> <a data-turbo="true" href="/category/html5/canvas">Canvas</a> <a data-turbo="true" href="/category/html5/charts-and-graphs">Charts and Graphs</a> <a data-turbo="true" href="/category/html5/forms">Forms</a> <a data-turbo="true" href="/category/html5/games">Games</a> <a data-turbo="true" href="/category/html5/libraries">Libraries</a> <a data-turbo="true" href="/category/html5/media">Media</a> <a data-turbo="true" href="/category/html5/presentations">Presentations</a> <a data-turbo="true" href="/category/html5/sliders">Sliders</a> <a data-turbo="true" href="/category/html5/storage">Storage</a> <a data-turbo="true" href="/category/html5/templates">Templates</a> <a data-turbo="true" href="/category/html5/miscellaneous">Miscellaneous</a> </nav> </div> </div> <div class="shared-global_header-categories_menu_component__menuItem"> <a data-turbo="true" class="shared-global_header-categories_menu_component__link shared-global_header-categories_menu_component__link" href="/search/ai"> AI Tools </a> <div class="shared-global_header-categories_menu_component__dropdownContainer"> <nav class="shared-global_header-categories_menu_component__dropdown"> <a class="shared-global_header-categories_menu_component__dropdownTop" data-turbo="true" href="/search/ai?sort=sales">Popular Items</a> <a data-turbo="true" href="/search/ai%20content">AI Writers and Content Generators</a> <a data-turbo="true" href="/search/ai%20image">AI Image and Video Generators</a> <a data-turbo="true" href="/search/ai%20chat">AI Chatbots</a> </nav> </div> </div> <div class="shared-global_header-categories_menu_component__menuItem"> <a data-turbo="false" class="shared-global_header-categories_menu_component__link shared-global_header-categories_menu_component__linkEmpty" href="https://themeforest.net/category/wordpress"> WP Themes </a> </div> <div class="shared-global_header-categories_menu_component__menuItem"> <a data-turbo="true" class="shared-global_header-categories_menu_component__link shared-global_header-categories_menu_component__link" href="/category/plugins"> Plugins </a> <div class="shared-global_header-categories_menu_component__dropdownContainer"> <nav class="shared-global_header-categories_menu_component__dropdown"> <a class="shared-global_header-categories_menu_component__dropdownTop" data-turbo="true" href="/popular_item/by_category?category=plugins">Popular Items</a> <a data-turbo="true" href="/category/plugins/concrete5">Concrete5</a> <a data-turbo="true" href="/category/plugins/drupal">Drupal</a> <a data-turbo="true" href="/category/plugins/expressionengine">ExpressionEngine</a> <a data-turbo="true" href="/category/plugins/joomla">Joomla</a> <a data-turbo="true" href="/category/plugins/magento-extensions">Magento Extensions</a> <a data-turbo="true" href="/category/plugins/muse-widgets">Muse Widgets</a> <a data-turbo="true" href="/category/plugins/opencart">OpenCart</a> <a data-turbo="true" href="/category/plugins/oscommerce">osCommerce</a> <a data-turbo="true" href="/category/plugins/prestashop">Prestashop</a> <a data-turbo="true" href="/category/plugins/ubercart">Ubercart</a> <a data-turbo="true" href="/category/plugins/virtuemart">VirtueMart</a> <a data-turbo="true" href="/category/plugins/zen-cart">Zen Cart</a> <a data-turbo="true" href="/category/plugins/miscellaneous">Miscellaneous</a> </nav> </div> </div> <div class="shared-global_header-categories_menu_component__menuItem"> <a rel="noopener" target="_blank" data-turbo="false" class="shared-global_header-categories_menu_component__link shared-global_header-categories_menu_component__linkEmpty shared-global_header-categories_menu_component__linkExternal" href="https://placeit.net/mockup-generator?utm_source=envatomarket&utm_medium=promos&utm_campaign=placeit_mkt-menu-photos&utm_content=mockup_generator"> Mockup Generator </a> </div> <div class="shared-global_header-categories_menu_component__menuItem"> <a data-turbo="false" class="shared-global_header-categories_menu_component__link shared-global_header-categories_menu_component__link" href="/category"> More </a> <div class="shared-global_header-categories_menu_component__dropdownContainer"> <nav class="shared-global_header-categories_menu_component__dropdown"> <a data-turbo="true" href="/category/net">.NET</a> <a data-turbo="true" href="/category/apps">Apps</a> <a data-turbo="true" href="/search?term=facebook&type=files">Facebook</a> </nav> </div> </div> </nav> </div> </div> </div> </div> <div class="search-index_content__root"> <div class="search-search_header_component__root" data-controller="toggler"> <form role="search" method="get" action="/search" class="shared-autosuggest_component__root shared-autosuggest_component__fullLayoutStyle" data-controller="autosuggest" data-action="submit->autosuggest#onSubmit" data-autosuggest-target="form" data-autosuggest-result-class="shared-autosuggest_component__searchItem" data-autosuggest-result-category-class="shared-autosuggest_component__searchItemCategory" data-autosuggest-result-separator-class="shared-autosuggest_component__searchItemSeparator" data-autosuggest-category-value="css/animations-and-effects" data-autosuggest-suggestions-count-value="5"> <input type="hidden" name="category" value="css/animations-and-effects" data-autosuggest-target="category"> <div class="shared-autosuggest_component__searchInputWrapper" data-controller="search-event"> <input class="shared-autosuggest_component__searchInput" placeholder="Search within these results" name="term" autocomplete="off" type="search" aria-label="search" value="" data-search-term="" data-search-event-target="input" data-action="keydown->autosuggest#onKeydown blur->autosuggest#onInputBlur focus->autosuggest#onInputFocus input->autosuggest#onInputChange" data-autosuggest-target="input" /> <button class="shared-autosuggest_component__clearSearchBtn" type="button" aria-label="Clear" data-action="click->autosuggest#clearSearchInput" data-autosuggest-target="clear" > <span class="shared-autosuggest_component__clearSearchIcon"> <svg width='100%' height='100%'> <use xlink:href='/storefront/assets/icon_spritesheet-2c8173174a30370958101e9b5e0dc4a0503c16573b4e2c0961245849681b052e.svg#close'></use> </svg> </span> </button> <nav class="shared-autosuggest_component__searchSuggestions" data-autosuggest-target="results"></nav> <button class="shared-autosuggest_component__searchBtn" aria-label="Search" data-action="click->search-event#submit" data-autosuggest-target="submit" > <span class="shared-autosuggest_component__searchBtnIcon"><svg width='100%' height='100%'> <use xlink:href='/storefront/assets/icon_spritesheet-2c8173174a30370958101e9b5e0dc4a0503c16573b4e2c0961245849681b052e.svg#search'></use> </svg> </span> <span class="shared-autosuggest_component__searchBtnLabel">Search</span> </button> </div> </form> <div class="search-search_header_component__headingContainer"> <h1 class="search-search_header_component__heading"> <strong>233</strong> CSS Animations sorted by best sellers. </h1> </div> </div> <div class="search-index_content__searchContentSection" id="content" data-controller="filters-switcher" data-filters-switcher-default-behavior-value="open" data-filters-switcher-button-active-class="search-index_content__filtersActive" data-filters-switcher-button-inactive-class="search-index_content__filtersInactive" data-filters-switcher-desktop-hide-class="search-index_content__hideDesktopFilters" data-filters-switcher-mobile-show-class="search-index_content__showMobileFilters" data-filters-switcher-icon-hide-class="search-index_content__hide"> <div class="search-index_content__searchControls"> <div class="search-index_content__filterRefinePlaceholder"> <button class="search-index_content__toggleButton search-index_content__filtersActive" data-filters-switcher-target="button" data-action="filters-switcher#toggle" > <span class="search-index_content__closeIcon" data-filters-switcher-target="closeIcon"> <svg width='100%' height='100%'> <use xlink:href='/storefront/assets/icon_spritesheet-2c8173174a30370958101e9b5e0dc4a0503c16573b4e2c0961245849681b052e.svg#close_thin'></use> </svg> </span> <span class="search-index_content__openIcon" data-filters-switcher-target="openIcon"> <svg width='100%' height='100%'> <use xlink:href='/storefront/assets/icon_spritesheet-2c8173174a30370958101e9b5e0dc4a0503c16573b4e2c0961245849681b052e.svg#filters_show'></use> </svg> </span> <span class="search-index_content__toggleButtonText"> Filter <span class="search-index_content__mobileOnly">(1)</span> <span class="search-index_content__hiddenOnMobile">& Refine</span> </span> </button> </div> <div class="search-index_content__priceNotice">Price is in US dollars and excludes tax and handling fees</div> <div class="search-index_content__searchResultHeader"> <div class="search-index_content__headerRightSideContainer"> <div class="search-index_content__headerRightSide"> <div class="search-list_grid_component__root"> <a title="List View" class="search-list_grid_component__listGridBtn search-list_grid_component__selected" href="/category/css/animations-and-effects#content" rel="nofollow" > <svg width='100%' height='100%'> <use xlink:href='/storefront/assets/icon_spritesheet-2c8173174a30370958101e9b5e0dc4a0503c16573b4e2c0961245849681b052e.svg#list'></use> </svg> </a> <a title="Grid View" class="search-list_grid_component__listGridBtn" href="/category/css/animations-and-effects?view=grid#content" rel="nofollow" > <svg width='100%' height='100%'> <use xlink:href='/storefront/assets/icon_spritesheet-2c8173174a30370958101e9b5e0dc4a0503c16573b4e2c0961245849681b052e.svg#grid'></use> </svg> </a> </div> <div class="search-sort_pills_component__root"> <div class="search-sort_pills_component__sortByDropdown"> <label for="sortby" class="search-sort_pills_component__sortByLabel">Sort by: </label> <select class="search-sort_pills_component__sortBySelect" id="sortby" name="sortby" data-controller="dropdown-navigation" data-action="dropdown-navigation#navigate" > <option value="/category/css/animations-and-effects?sort=sales#content" selected> Best sellers </option> <option value="/category/css/animations-and-effects?sort=date#content" > Newest </option> <option value="/category/css/animations-and-effects?sort=rating#content" > Best rated </option> <option value="/category/css/animations-and-effects?sort=trending#content" > Trending </option> <option value="/category/css/animations-and-effects?sort=price-asc#content" > Price: low to high </option> <option value="/category/css/animations-and-effects?sort=price-desc#content" > Price: high to low </option> </select> <span class="search-sort_pills_component__chevronIcon"> <svg width='100%' height='100%'> <use xlink:href='/storefront/assets/icon_spritesheet-2c8173174a30370958101e9b5e0dc4a0503c16573b4e2c0961245849681b052e.svg#chevron_down'></use> </svg> </span> </div> <div class="search-sort_pills_component__sortButtonRow"> <a href="/category/css/animations-and-effects?sort=sales#content" class="search-sort_pills_component__sortButton search-sort_pills_component__selected" rel="nofollow" > Best sellers </a> <a href="/category/css/animations-and-effects?sort=date#content" class="search-sort_pills_component__sortButton" rel="nofollow" > Newest </a> <a href="/category/css/animations-and-effects?sort=rating#content" class="search-sort_pills_component__sortButton" rel="nofollow" > Best rated </a> <a href="/category/css/animations-and-effects?sort=trending#content" class="search-sort_pills_component__sortButton" rel="nofollow" > Trending </a> <a href="/category/css/animations-and-effects?sort=price-asc#content" class="search-sort_pills_component__sortButton" rel="nofollow" > Price <div class="search-sort_pills_component__priceSortingIcon"> <svg width='100%' height='100%'> <use xlink:href='/storefront/assets/icon_spritesheet-2c8173174a30370958101e9b5e0dc4a0503c16573b4e2c0961245849681b052e.svg#price_no_sort'></use> </svg> </div> </a> </div> </div> </div> </div> </div> </div> <div class="search-index_content__searchResults"> <div> <div class="search-index_content__filtersPanel" data-filters-switcher-target="panel"> <div class="search-index_content__mobileFiltersHeader"> <div class="search-index_content__mobileFiltersHeadings"> <h3>Filter & Refine</h3> <span>233 results</span> </div> <a href="/category/all">Clear all</a> <button data-action="filters-switcher#toggle"> Done </button> </div> <div class="search-filters-filters_panel_component__filter" data-controller="toggler" data-filter-title="Category" data-toggler-session-storage-key-value="Category" data-toggler-expanded-value="true" data-toggler-toggle-on-connect-value="true"> <div class="search-filters-filters_panel_component__filterHeader" data-action="click->toggler#toggle" data-toggler-target="toggle" data-toggler-expanded-aria-label="Collapse Category Filter" data-toggler-collapsed-aria-label="Expand Category Filter" aria-label="Expand Category Filter"> <h3 class="search-filters-filters_panel_component__filterHeading">Category</h3> <span class="search-filters-filters_panel_component__chevron search-filters-filters_panel_component__expanded" data-toggler-target="toggle" data-toggler-expanded-class="search-filters-filters_panel_component__expanded"> <svg width='100%' height='100%'> <use xlink:href='/storefront/assets/icon_spritesheet-2c8173174a30370958101e9b5e0dc4a0503c16573b4e2c0961245849681b052e.svg#button_chevron_right'></use> </svg> </span> </div> <div class="search-filters-filters_panel_component__filterBody search-filters-filters_panel_component__expanded" data-toggler-target="toggle" data-toggler-expanded-class="search-filters-filters_panel_component__expanded"> <nav class="search-filters-category_filter_component__root" aria-label="categories filter"> <ul> <li class="search-filters-category_filter_component__category"> <span class="search-filters-category_filter_component__chevronIcon"> <svg width='100%' height='100%'> <use xlink:href='/storefront/assets/icon_spritesheet-2c8173174a30370958101e9b5e0dc4a0503c16573b4e2c0961245849681b052e.svg#chevron_left'></use> </svg> </span> <a class="search-filters-category_filter_component__categoryLink search-filters-category_filter_component__parent" href="/search#content">All categories</a> <span class="search-filters-category_filter_component__count">34,954</span> </li> <li class="search-filters-category_filter_component__category"> <span class="search-filters-category_filter_component__chevronIcon"> <svg width='100%' height='100%'> <use xlink:href='/storefront/assets/icon_spritesheet-2c8173174a30370958101e9b5e0dc4a0503c16573b4e2c0961245849681b052e.svg#chevron_left'></use> </svg> </span> <a class="search-filters-category_filter_component__categoryLink search-filters-category_filter_component__parent" href="/category/css#content">CSS</a> <span class="search-filters-category_filter_component__count">933</span> </li> <li class="search-filters-category_filter_component__category"> <a class="search-filters-category_filter_component__categoryLink search-filters-category_filter_component__current" href="/search#content">Animations And Effects</a> <span class="search-filters-category_filter_component__count">233</span> </li> </ul> </nav> </div> </div> <div class="search-filters-filters_panel_component__filter" data-controller="toggler" data-filter-title="Price" data-toggler-session-storage-key-value="Price" data-toggler-expanded-value="true" data-toggler-toggle-on-connect-value="true"> <div class="search-filters-filters_panel_component__filterHeader" data-action="click->toggler#toggle" data-toggler-target="toggle" data-toggler-expanded-aria-label="Collapse Price Filter" data-toggler-collapsed-aria-label="Expand Price Filter" aria-label="Expand Price Filter"> <h3 class="search-filters-filters_panel_component__filterHeading">Price</h3> <span class="search-filters-filters_panel_component__chevron search-filters-filters_panel_component__expanded" data-toggler-target="toggle" data-toggler-expanded-class="search-filters-filters_panel_component__expanded"> <svg width='100%' height='100%'> <use xlink:href='/storefront/assets/icon_spritesheet-2c8173174a30370958101e9b5e0dc4a0503c16573b4e2c0961245849681b052e.svg#button_chevron_right'></use> </svg> </span> </div> <div class="search-filters-filters_panel_component__filterBody search-filters-filters_panel_component__expanded" data-toggler-target="toggle" data-toggler-expanded-class="search-filters-filters_panel_component__expanded"> <div> <form method="get" action="/search" data-controller= data-action= > <input type="hidden" name="category" value="css/animations-and-effects"> <div class="search-filters-range_filter_component__inputsContainer"> <div class="search-filters-range_filter_component__inputWrapper"> <span class="search-filters-range_filter_component__prefix"> $ </span> <input type="text" name="price_min" class="search-filters-range_filter_component__input" placeholder="2" title="Enter price as a whole number" pattern="^\d*$" data-length-format-target="input" value= > </div> <span class="search-filters-range_filter_component__spacer">-</span> <div class="search-filters-range_filter_component__inputWrapper"> <span class="search-filters-range_filter_component__prefix"> $ </span> <input type="text" name="price_max" class="search-filters-range_filter_component__input" placeholder="50" title="Enter price as a whole number" pattern="^\d*$" data-length-format-target="input" value= > </div> <button type="submit" aria-label="submit" class="search-filters-range_filter_component__button" > <span class="search-filters-range_filter_component__chevron"> <svg width='100%' height='100%'> <use xlink:href='/storefront/assets/icon_spritesheet-2c8173174a30370958101e9b5e0dc4a0503c16573b4e2c0961245849681b052e.svg#button_chevron_right'></use> </svg> </span> </button> </div> </form> </div> </div> </div> <div class="search-filters-filters_panel_component__filter" data-controller="toggler" data-filter-title="On Sale" data-toggler-session-storage-key-value="On Sale" data-toggler-expanded-value="true" data-toggler-toggle-on-connect-value="true"> <div class="search-filters-filters_panel_component__filterHeader" data-action="click->toggler#toggle" data-toggler-target="toggle" data-toggler-expanded-aria-label="Collapse On Sale Filter" data-toggler-collapsed-aria-label="Expand On Sale Filter" aria-label="Expand On Sale Filter"> <h3 class="search-filters-filters_panel_component__filterHeading">On Sale</h3> <span class="search-filters-filters_panel_component__chevron search-filters-filters_panel_component__expanded" data-toggler-target="toggle" data-toggler-expanded-class="search-filters-filters_panel_component__expanded"> <svg width='100%' height='100%'> <use xlink:href='/storefront/assets/icon_spritesheet-2c8173174a30370958101e9b5e0dc4a0503c16573b4e2c0961245849681b052e.svg#button_chevron_right'></use> </svg> </span> </div> <div class="search-filters-filters_panel_component__filterBody search-filters-filters_panel_component__expanded" data-toggler-target="toggle" data-toggler-expanded-class="search-filters-filters_panel_component__expanded"> <div class="search-filters-checkbox_filter_component__root"> <div class="search-filters-checkbox_filter_component__option"> <a rel="nofollow" class="search-filters-checkbox_filter_component__link" href="/category/css/animations-and-effects?discounted_only=1#content"> <span class="search-filters-checkbox_filter_component__checkbox"></span> Yes </a> <span class="search-filters-checkbox_filter_component__count">0</span> </div> </div> </div> </div> <div class="search-filters-filters_panel_component__filter" data-controller="toggler" data-filter-title="Software Version" data-toggler-session-storage-key-value="Software Version" data-toggler-expanded-value="true" data-toggler-toggle-on-connect-value="true"> <div class="search-filters-filters_panel_component__filterHeader" data-action="click->toggler#toggle" data-toggler-target="toggle" data-toggler-expanded-aria-label="Collapse Software Version Filter" data-toggler-collapsed-aria-label="Expand Software Version Filter" aria-label="Expand Software Version Filter"> <h3 class="search-filters-filters_panel_component__filterHeading">Software Version</h3> <span class="search-filters-filters_panel_component__chevron search-filters-filters_panel_component__expanded" data-toggler-target="toggle" data-toggler-expanded-class="search-filters-filters_panel_component__expanded"> <svg width='100%' height='100%'> <use xlink:href='/storefront/assets/icon_spritesheet-2c8173174a30370958101e9b5e0dc4a0503c16573b4e2c0961245849681b052e.svg#button_chevron_right'></use> </svg> </span> </div> <div class="search-filters-filters_panel_component__filterBody search-filters-filters_panel_component__expanded" data-toggler-target="toggle" data-toggler-expanded-class="search-filters-filters_panel_component__expanded"> <div class="search-filters-software_version_filter_component__root"> <a class="search-filters-software_version_filter_component__link search-filters-software_version_filter_component__all" href="/category/css/animations-and-effects#content"> All Software Versions <span class="search-filters-software_version_filter_component__count">233</span> </a> <div class="search-filters-software_version_filter_component__platformWrapper" data-controller="toggler" data-toggler-expanded-value="false" data-toggler-toggle-on-connect-value="true" > <div class="search-filters-software_version_filter_component__platformLinkWrapper"> <a rel="nofollow" class="search-filters-software_version_filter_component__link search-filters-software_version_filter_component__platform" href="/category/css/animations-and-effects?platform=CSS3#content"> CSS3 <span class="search-filters-software_version_filter_component__count">223</span> </a> </div> <div class="search-filters-software_version_filter_component__platformVersions" data-toggler-target="toggle" data-toggler-expanded-class="search-filters-software_version_filter_component__expanded" > </div> </div> <div class="search-filters-software_version_filter_component__platformWrapper" data-controller="toggler" data-toggler-expanded-value="false" data-toggler-toggle-on-connect-value="true" > <div class="search-filters-software_version_filter_component__platformLinkWrapper"> <a rel="nofollow" class="search-filters-software_version_filter_component__link search-filters-software_version_filter_component__platform" href="/category/css/animations-and-effects?platform=CSS2#content"> CSS2 <span class="search-filters-software_version_filter_component__count">151</span> </a> </div> <div class="search-filters-software_version_filter_component__platformVersions" data-toggler-target="toggle" data-toggler-expanded-class="search-filters-software_version_filter_component__expanded" > </div> </div> </div> </div> </div> <div class="search-filters-filters_panel_component__filter" data-controller="toggler" data-filter-title="Sales" data-toggler-session-storage-key-value="Sales" data-toggler-expanded-value="true" data-toggler-toggle-on-connect-value="true"> <div class="search-filters-filters_panel_component__filterHeader" data-action="click->toggler#toggle" data-toggler-target="toggle" data-toggler-expanded-aria-label="Collapse Sales Filter" data-toggler-collapsed-aria-label="Expand Sales Filter" aria-label="Expand Sales Filter"> <h3 class="search-filters-filters_panel_component__filterHeading">Sales</h3> <span class="search-filters-filters_panel_component__chevron search-filters-filters_panel_component__expanded" data-toggler-target="toggle" data-toggler-expanded-class="search-filters-filters_panel_component__expanded"> <svg width='100%' height='100%'> <use xlink:href='/storefront/assets/icon_spritesheet-2c8173174a30370958101e9b5e0dc4a0503c16573b4e2c0961245849681b052e.svg#button_chevron_right'></use> </svg> </span> </div> <div class="search-filters-filters_panel_component__filterBody search-filters-filters_panel_component__expanded" data-toggler-target="toggle" data-toggler-expanded-class="search-filters-filters_panel_component__expanded"> <div class="search-filters-checkbox_filter_component__root"> <div class="search-filters-checkbox_filter_component__option"> <a rel="nofollow" class="search-filters-checkbox_filter_component__link" href="/category/css/animations-and-effects?sales=rank-0#content"> <span class="search-filters-checkbox_filter_component__checkbox"></span> No Sales </a> <span class="search-filters-checkbox_filter_component__count">66</span> </div> <div class="search-filters-checkbox_filter_component__option"> <a rel="nofollow" class="search-filters-checkbox_filter_component__link" href="/category/css/animations-and-effects?sales=rank-1#content"> <span class="search-filters-checkbox_filter_component__checkbox"></span> Low </a> <span class="search-filters-checkbox_filter_component__count">108</span> </div> <div class="search-filters-checkbox_filter_component__option"> <a rel="nofollow" class="search-filters-checkbox_filter_component__link" href="/category/css/animations-and-effects?sales=rank-2#content"> <span class="search-filters-checkbox_filter_component__checkbox"></span> Medium </a> <span class="search-filters-checkbox_filter_component__count">57</span> </div> <div class="search-filters-checkbox_filter_component__option"> <a rel="nofollow" class="search-filters-checkbox_filter_component__link" href="/category/css/animations-and-effects?sales=rank-3#content"> <span class="search-filters-checkbox_filter_component__checkbox"></span> High </a> <span class="search-filters-checkbox_filter_component__count">2</span> </div> <div class="search-filters-checkbox_filter_component__option"> <a rel="nofollow" class="search-filters-checkbox_filter_component__link" href="/category/css/animations-and-effects?sales=rank-4#content"> <span class="search-filters-checkbox_filter_component__checkbox"></span> Top Sellers </a> <span class="search-filters-checkbox_filter_component__count">0</span> </div> </div> </div> </div> <div class="search-filters-filters_panel_component__filter" data-controller="toggler" data-filter-title="Rating" data-toggler-session-storage-key-value="Rating" data-toggler-expanded-value="true" data-toggler-toggle-on-connect-value="true"> <div class="search-filters-filters_panel_component__filterHeader" data-action="click->toggler#toggle" data-toggler-target="toggle" data-toggler-expanded-aria-label="Collapse Rating Filter" data-toggler-collapsed-aria-label="Expand Rating Filter" aria-label="Expand Rating Filter"> <h3 class="search-filters-filters_panel_component__filterHeading">Rating</h3> <span class="search-filters-filters_panel_component__chevron search-filters-filters_panel_component__expanded" data-toggler-target="toggle" data-toggler-expanded-class="search-filters-filters_panel_component__expanded"> <svg width='100%' height='100%'> <use xlink:href='/storefront/assets/icon_spritesheet-2c8173174a30370958101e9b5e0dc4a0503c16573b4e2c0961245849681b052e.svg#button_chevron_right'></use> </svg> </span> </div> <div class="search-filters-filters_panel_component__filterBody search-filters-filters_panel_component__expanded" data-toggler-target="toggle" data-toggler-expanded-class="search-filters-filters_panel_component__expanded"> <div class="search-filters-radio_filter_component__root"> <div class="search-filters-radio_filter_component__option"> <a rel="nofollow" class="search-filters-radio_filter_component__link" href="/category/css/animations-and-effects#content"> <input type="radio" class="search-filters-radio_filter_component__radioInput" checked name="rating_min" value="" /> <span>Show all</span> </a> <span class="search-filters-radio_filter_component__count">233</span> </div> <div class="search-filters-radio_filter_component__option"> <a rel="nofollow" class="search-filters-radio_filter_component__link" href="/category/css/animations-and-effects?rating_min=1#content"> <input type="radio" class="search-filters-radio_filter_component__radioInput" name="rating_min" value="1" /> <span>1 star and higher</span> </a> <span class="search-filters-radio_filter_component__count">20</span> </div> <div class="search-filters-radio_filter_component__option"> <a rel="nofollow" class="search-filters-radio_filter_component__link" href="/category/css/animations-and-effects?rating_min=2#content"> <input type="radio" class="search-filters-radio_filter_component__radioInput" name="rating_min" value="2" /> <span>2 stars and higher</span> </a> <span class="search-filters-radio_filter_component__count">20</span> </div> <div class="search-filters-radio_filter_component__option"> <a rel="nofollow" class="search-filters-radio_filter_component__link" href="/category/css/animations-and-effects?rating_min=3#content"> <input type="radio" class="search-filters-radio_filter_component__radioInput" name="rating_min" value="3" /> <span>3 stars and higher</span> </a> <span class="search-filters-radio_filter_component__count">19</span> </div> <div class="search-filters-radio_filter_component__option"> <a rel="nofollow" class="search-filters-radio_filter_component__link" href="/category/css/animations-and-effects?rating_min=4#content"> <input type="radio" class="search-filters-radio_filter_component__radioInput" name="rating_min" value="4" /> <span>4 stars and higher</span> </a> <span class="search-filters-radio_filter_component__count">15</span> </div> </div> </div> </div> <div class="search-filters-filters_panel_component__filter" data-controller="toggler" data-filter-title="Date Added" data-toggler-session-storage-key-value="Date Added" data-toggler-expanded-value="true" data-toggler-toggle-on-connect-value="true"> <div class="search-filters-filters_panel_component__filterHeader" data-action="click->toggler#toggle" data-toggler-target="toggle" data-toggler-expanded-aria-label="Collapse Date Added Filter" data-toggler-collapsed-aria-label="Expand Date Added Filter" aria-label="Expand Date Added Filter"> <h3 class="search-filters-filters_panel_component__filterHeading">Date Added</h3> <span class="search-filters-filters_panel_component__chevron search-filters-filters_panel_component__expanded" data-toggler-target="toggle" data-toggler-expanded-class="search-filters-filters_panel_component__expanded"> <svg width='100%' height='100%'> <use xlink:href='/storefront/assets/icon_spritesheet-2c8173174a30370958101e9b5e0dc4a0503c16573b4e2c0961245849681b052e.svg#button_chevron_right'></use> </svg> </span> </div> <div class="search-filters-filters_panel_component__filterBody search-filters-filters_panel_component__expanded" data-toggler-target="toggle" data-toggler-expanded-class="search-filters-filters_panel_component__expanded"> <div class="search-filters-radio_filter_component__root"> <div class="search-filters-radio_filter_component__option"> <a rel="nofollow" class="search-filters-radio_filter_component__link" href="/category/css/animations-and-effects#content"> <input type="radio" class="search-filters-radio_filter_component__radioInput" checked name="date" value="" /> <span>Any date</span> </a> <span class="search-filters-radio_filter_component__count">233</span> </div> <div class="search-filters-radio_filter_component__option"> <a rel="nofollow" class="search-filters-radio_filter_component__link" href="/category/css/animations-and-effects?date=this-year#content"> <input type="radio" class="search-filters-radio_filter_component__radioInput" name="date" value="this-year" /> <span>In the last year</span> </a> <span class="search-filters-radio_filter_component__count">7</span> </div> <div class="search-filters-radio_filter_component__option"> <a rel="nofollow" class="search-filters-radio_filter_component__link" href="/category/css/animations-and-effects?date=this-month#content"> <input type="radio" class="search-filters-radio_filter_component__radioInput" name="date" value="this-month" /> <span>In the last month</span> </a> <span class="search-filters-radio_filter_component__count">1</span> </div> <div class="search-filters-radio_filter_component__option"> <a rel="nofollow" class="search-filters-radio_filter_component__link" href="/category/css/animations-and-effects?date=this-week#content"> <input type="radio" class="search-filters-radio_filter_component__radioInput" name="date" value="this-week" /> <span>In the last week</span> </a> <span class="search-filters-radio_filter_component__count">1</span> </div> </div> </div> </div> </div> </div> <div class="search-index_content__spinner"> <svg class="shared-spinner_component__spinner shared-spinner_component__large" viewBox="0 0 66 66" xmlns="http://www.w3.org/2000/svg"> <circle class="shared-spinner_component__path" fill="none" stroke-width="6" stroke-linecap="round" cx="33" cy="33" r="30"> </circle> </svg> </div> <main class="search-index_content__searchResultsBody"> <div class="search-index_content__selectedFiltersAndVolumeWrapper"> <div class="search-index_content__selectedFiltersWrapper"> <div class="search-controls-selected_filters_component__root"> <p class="search-controls-selected_filters_component__itemCount"> <span class="search-controls-selected_filters_component__itemCountNumber">233</span> items in </p> <ol class="search-controls-category_breadcrumbs_component__root" vocab="http://schema.org/" typeof="BreadcrumbList"> <li class="search-controls-category_breadcrumbs_component__breadcrumb" property="itemListElement" typeof="ListItem"> <a href="/category/all#content" class="search-controls-category_breadcrumbs_component__link" property="item" typeof="WebPage"><span property="name">All Categories</span></a> <meta property="position" content="1"> </li> <li class="search-controls-category_breadcrumbs_component__separator">/</li> <li class="search-controls-category_breadcrumbs_component__breadcrumb" property="itemListElement" typeof="ListItem"> <a href="/category/css#content" class="search-controls-category_breadcrumbs_component__link" property="item" typeof="WebPage"><span property="name">CSS</span></a> <meta property="position" content="2"> </li> <li class="search-controls-category_breadcrumbs_component__separator">/</li> <li class="search-controls-category_breadcrumbs_component__breadcrumb" property="itemListElement" typeof="ListItem"> <a href="/category/css/animations-and-effects#content" class="search-controls-category_breadcrumbs_component__link" property="item" typeof="WebPage"><span property="name">Animations And Effects</span></a> <meta property="position" content="3"> </li> </ol> <div class="search-controls-removable_filter_pills_component__root"> <ul class="search-controls-removable_filter_pills_component__pills"> </ul> </div> <a class="search-controls-selected_filters_component__clearAll" href="/category/all">Clear all</a> </div> </div> </div> <div class="search-index_content__searchResultsWrapper"> <div data-impression-tracker-target="item" data-analytics-view-payload="{"eventName":"view_item_list","eventType":"user","searchTerm":null,"searchResults":233,"ecommerce":{"currency":"USD","item_list_name":"Search Results: Category","items":[{"itemId":134187,"index":1,"affiliation":"codecanyon","itemName":"CSS3 Shadow Pack","itemBrand":"cosmocoder","itemCategory":"css","itemCategory2":"animations-and-effects","itemCategory3":null,"price":"5.00","quantity":1},{"itemId":851059,"index":2,"affiliation":"codecanyon","itemName":"CSS3 Ribbon Pack","itemBrand":"cosmocoder","itemCategory":"css","itemCategory2":"animations-and-effects","itemCategory3":null,"price":"5.00","quantity":1},{"itemId":1309670,"index":3,"affiliation":"codecanyon","itemName":"IHC - Portfolio CSS3 Image Hover Caption","itemBrand":"awps","itemCategory":"css","itemCategory2":"animations-and-effects","itemCategory3":null,"price":"5.00","quantity":1},{"itemId":1783098,"index":4,"affiliation":"codecanyon","itemName":"Pristine Slider: Pure CSS3 interactive slider.","itemBrand":"nickys","itemCategory":"css","itemCategory2":"animations-and-effects","itemCategory3":null,"price":"7.00","quantity":1},{"itemId":12472316,"index":5,"affiliation":"codecanyon","itemName":"Aero - Image Hover Effects","itemBrand":"ohkimur","itemCategory":"css","itemCategory2":"animations-and-effects","itemCategory3":null,"price":"13.00","quantity":1},{"itemId":831087,"index":6,"affiliation":"codecanyon","itemName":"Full CSS3 Tooltip","itemBrand":"vp76","itemCategory":"css","itemCategory2":"animations-and-effects","itemCategory3":null,"price":"3.00","quantity":1},{"itemId":477268,"index":7,"affiliation":"codecanyon","itemName":"CSS3 Image Lightbox","itemBrand":"QuanticaLabs","itemCategory":"css","itemCategory2":"animations-and-effects","itemCategory3":null,"price":"10.00","quantity":1},{"itemId":7206061,"index":8,"affiliation":"codecanyon","itemName":"Social Mosaic Wall [ 2022 Edition ]","itemBrand":"INVEDION","itemCategory":"css","itemCategory2":"animations-and-effects","itemCategory3":null,"price":"7.00","quantity":1},{"itemId":4119780,"index":9,"affiliation":"codecanyon","itemName":"CSS3 Banner Rotator","itemBrand":"zcubetechnology","itemCategory":"css","itemCategory2":"animations-and-effects","itemCategory3":null,"price":"4.00","quantity":1},{"itemId":8370121,"index":10,"affiliation":"codecanyon","itemName":"tFigure - Image Captions","itemBrand":"mmetrodw","itemCategory":"css","itemCategory2":"animations-and-effects","itemCategory3":null,"price":"3.00","quantity":1},{"itemId":3895607,"index":11,"affiliation":"codecanyon","itemName":"Pure CSS3 Image Accordion","itemBrand":"voky","itemCategory":"css","itemCategory2":"animations-and-effects","itemCategory3":null,"price":"4.00","quantity":1},{"itemId":2253518,"index":12,"affiliation":"codecanyon","itemName":"CSS3 Hover Pack","itemBrand":"pauloreg","itemCategory":"css","itemCategory2":"animations-and-effects","itemCategory3":null,"price":"5.00","quantity":1},{"itemId":14413214,"index":13,"affiliation":"codecanyon","itemName":"Ayan. CSS3 Link Hover Effects","itemBrand":"reverietech","itemCategory":"css","itemCategory2":"animations-and-effects","itemCategory3":null,"price":"5.00","quantity":1},{"itemId":8242708,"index":14,"affiliation":"codecanyon","itemName":"Animated Loaders KIT","itemBrand":"mmetrodw","itemCategory":"css","itemCategory2":"animations-and-effects","itemCategory3":null,"price":"6.00","quantity":1},{"itemId":30082937,"index":15,"affiliation":"codecanyon","itemName":"CSS3 Glowing Effect Button","itemBrand":"romincomputer","itemCategory":"css","itemCategory2":"animations-and-effects","itemCategory3":null,"price":"2.00","quantity":1},{"itemId":13826565,"index":16,"affiliation":"codecanyon","itemName":"50+ Pure CSS3 Preloaders","itemBrand":"fullstackdev","itemCategory":"css","itemCategory2":"animations-and-effects","itemCategory3":null,"price":"10.00","quantity":1},{"itemId":19326566,"index":17,"affiliation":"codecanyon","itemName":"Flutter - CSS Image Hover Effects \u0026 Lightbox","itemBrand":"reverietech","itemCategory":"css","itemCategory2":"animations-and-effects","itemCategory3":null,"price":"5.00","quantity":1},{"itemId":6896127,"index":18,"affiliation":"codecanyon","itemName":"Pure CSS3 Gallery","itemBrand":"luca8link","itemCategory":"css","itemCategory2":"animations-and-effects","itemCategory3":null,"price":"4.00","quantity":1},{"itemId":7067192,"index":19,"affiliation":"codecanyon","itemName":"Portfolio Wall | html - css","itemBrand":"AmrMeRo","itemCategory":"css","itemCategory2":"animations-and-effects","itemCategory3":null,"price":"3.00","quantity":1},{"itemId":13403668,"index":20,"affiliation":"codecanyon","itemName":"Viavi CSS3 Hover Effects","itemBrand":"viaviwebtech","itemCategory":"css","itemCategory2":"animations-and-effects","itemCategory3":null,"price":"9.00","quantity":1},{"itemId":10688406,"index":21,"affiliation":"codecanyon","itemName":"VSPreloader - Ultimate CSS Animated Preloaders","itemBrand":"vsart","itemCategory":"css","itemCategory2":"animations-and-effects","itemCategory3":null,"price":"5.00","quantity":1},{"itemId":21167030,"index":22,"affiliation":"codecanyon","itemName":"Essential Image Hover Effects","itemBrand":"thecodude","itemCategory":"css","itemCategory2":"animations-and-effects","itemCategory3":null,"price":"8.00","quantity":1},{"itemId":5741917,"index":23,"affiliation":"codecanyon","itemName":"3D Text Effect - CSS3","itemBrand":"Art101","itemCategory":"css","itemCategory2":"animations-and-effects","itemCategory3":null,"price":"12.00","quantity":1},{"itemId":14234524,"index":24,"affiliation":"codecanyon","itemName":"Viavi CSS3 Scroll Effects","itemBrand":"viaviwebtech","itemCategory":"css","itemCategory2":"animations-and-effects","itemCategory3":null,"price":"7.00","quantity":1},{"itemId":11846740,"index":25,"affiliation":"codecanyon","itemName":"tFigure2 - Image Captions","itemBrand":"mmetrodw","itemCategory":"css","itemCategory2":"animations-and-effects","itemCategory3":null,"price":"5.00","quantity":1},{"itemId":4838409,"index":26,"affiliation":"codecanyon","itemName":"TileBox - Modern Responsive LightBox CSS","itemBrand":"SOHN","itemCategory":"css","itemCategory2":"animations-and-effects","itemCategory3":null,"price":"6.00","quantity":1},{"itemId":5811327,"index":27,"affiliation":"codecanyon","itemName":"Image Hover Effects","itemBrand":"luca8link","itemCategory":"css","itemCategory2":"animations-and-effects","itemCategory3":null,"price":"4.00","quantity":1},{"itemId":5713140,"index":28,"affiliation":"codecanyon","itemName":"CSS3 Product-Folio with Image Mapping","itemBrand":"MaheshSamudra","itemCategory":"css","itemCategory2":"animations-and-effects","itemCategory3":null,"price":"5.00","quantity":1},{"itemId":36537435,"index":29,"affiliation":"codecanyon","itemName":"CSS-Animated-Gradient-Backgrounds","itemBrand":"mohamed_yousef","itemCategory":"css","itemCategory2":"animations-and-effects","itemCategory3":null,"price":"3.00","quantity":1},{"itemId":21558172,"index":30,"affiliation":"codecanyon","itemName":"CARD - CSS3 Portfolio Cards with Hover Effects","itemBrand":"krsankarkr","itemCategory":"css","itemCategory2":"animations-and-effects","itemCategory3":null,"price":"5.00","quantity":1}]}}" class="search-item_cards_container_component__list"> <div class="shared-item_cards-card_component__root"> <div class="shared-item_cards-list-image_card_component__root" data-favorites-loader-target="item" data-item-id="134187" data-price="5.00" data-site="codecanyon" > <div class="shared-item_cards-list-image_card_component__contentWrapper shared-item_cards-list-image_card_component__landscapeImage"> <a class="shared-item_cards-list-image_card_component__itemLinkOverlay" href="https://codecanyon.net/item/css3-shadow-pack/134187" title="CSS3 Shadow Pack" aria-label="View CSS3 Shadow Pack" data-turbo="false" data-analytics-click-payload="{"eventName":"select_item","eventType":"user","ecommerce":{"currency":"USD","items":[{"affiliation":"codecanyon","itemId":134187,"itemName":"CSS3 Shadow Pack","itemBrand":"cosmocoder","itemCategory":"css","itemCategory2":"animations-and-effects","itemCategory3":null,"price":"5.00","quantity":1}]}}"></a> <div class="shared-item_cards-list-image_card_component__imageWrapper"> <div class="shared-item_cards-preview_image_component__carousel shared-item_cards-preview_image_component__singleImage" style="padding-bottom: 50.847457627118644%" > <a class="shared-item_cards-preview_image_component__imageLink" data-turbo="false" data-analytics-click-payload="{"eventName":"select_item","eventType":"user","ecommerce":{"currency":"USD","items":[{"affiliation":"codecanyon","itemId":134187,"itemName":"CSS3 Shadow Pack","itemBrand":"cosmocoder","itemCategory":"css","itemCategory2":"animations-and-effects","itemCategory3":null,"price":"5.00","quantity":1}]}}" href="https://codecanyon.net/item/css3-shadow-pack/134187"> <img src="https://market-resized.envatousercontent.com/previews/files/1411253/shadow-preview.jpg?w=590&h=300&cf_fit=crop&crop=top&format=auto&q=85&s=242addad86b4f605369b2dfab7dc68e43936f52a0d20acc17d84f6abd7b241ed" loading="lazy" style="left: 0%" class="shared-item_cards-preview_image_component__image" alt="CSS3 Shadow Pack" title="CSS3 Shadow Pack" width="590" height="300" data-controller="image-preview" data-action="error->image-preview#setFallback" data-fallback="https://previews.customer.envatousercontent.com/files/1411253/shadow-preview.jpg" data-carousel-target="image" /> </a></div> <div class="shared-item_cards-list-image_card_component__gradient" style="padding-top: 50.847457627118644%;"> <div class="shared-item_cards-list-image_card_component__buttons"> <a href="/my/bookmarks/new?item_id=134187" class="shared-item_cards-collection_button_component__collection" role="button" aria-label="Add to collection" title="Add to collection" rel="nofollow" data-controller="collection-button" data-action="collection-button#open" data-bookmark-button-target="bookmarkButton" data-item-id="134187" > <span class="shared-item_cards-collection_button_component__icon"> <svg width='100%' height='100%'> <use xlink:href='/storefront/assets/icon_spritesheet-2c8173174a30370958101e9b5e0dc4a0503c16573b4e2c0961245849681b052e.svg#collection'></use> </svg> </span> </a> <span class="shared-item_cards-list-image_card_component__buttonSeparator"></span> <form method="post" action="/my/favorites/134187" data-controller="favorite-button" data-action="submit->favorite-button#submit favoritesStoreUpdated@window->favorite-button#updateFromStore"> <input type="hidden" name="_method" value="post" data-favorite-button-target="formMethod"> <button type="submit" aria-label="Add to Favorites" class="shared-item_cards-favorite_button_component__favoriteButton" data-favorite-button-target="favoriteButton" data-favorited="false" data-item-id="134187"> <svg width='100%' height='100%'> <use xlink:href='/storefront/assets/icon_spritesheet-2c8173174a30370958101e9b5e0dc4a0503c16573b4e2c0961245849681b052e.svg#heart'></use> </svg> </button> </form> </div> </div> </div> <div class="shared-item_cards-list-image_card_component__detailsWrapper"> <h3 class="shared-item_cards-item_name_component__root"> <a class="shared-item_cards-item_name_component__itemNameLink" tabindex="0" data-turbo="false" data-analytics-click-payload="{"eventName":"select_item","eventType":"user","ecommerce":{"currency":"USD","items":[{"affiliation":"codecanyon","itemId":134187,"itemName":"CSS3 Shadow Pack","itemBrand":"cosmocoder","itemCategory":"css","itemCategory2":"animations-and-effects","itemCategory3":null,"price":"5.00","quantity":1}]}}" href="https://codecanyon.net/item/css3-shadow-pack/134187">CSS3 Shadow Pack</a> </h3> <div> <div class="shared-item_cards-author_category_component__root"> <i>by</i> <a href="https://codecanyon.net/user/cosmocoder" class="shared-item_cards-author_category_component__link" rel="nofollow" data-turbo="false" > cosmocoder </a> in <a href="/category/css/animations-and-effects" class="shared-item_cards-author_category_component__link" > Animations And Effects </a> </div> </div> <div class="shared-item_cards-list-image_card_component__attrsWrapper"> <ul> <li class="shared-item_cards-attributes_component__attribute"> <span class="shared-item_cards-attributes_component__label">Software Version: </span> <span class="shared-item_cards-attributes_component__value">CSS 3</span> </li> </ul> <div class="shared-item_cards-included_files_component__root"> File Types Included: <ul> <li class="shared-item_cards-included_files_component__fileType">JavaScript JS</li> <li class="shared-item_cards-included_files_component__fileType">HTML</li> <li class="shared-item_cards-included_files_component__fileType">CSS</li> </ul> </div> </div> </div> <div class="shared-item_cards-list-image_card_component__priceWrapper"> <div class="shared-item_cards-list-image_card_component__info"> <div class="shared-item_cards-list-image_card_component__favAndCollections"> <a href="/my/bookmarks/new?item_id=134187" class="shared-item_cards-collection_button_component__collection" role="button" aria-label="Add to collection" title="Add to collection" rel="nofollow" data-controller="collection-button" data-action="collection-button#open" data-bookmark-button-target="bookmarkButton" data-item-id="134187" > <span class="shared-item_cards-collection_button_component__icon"> <svg width='100%' height='100%'> <use xlink:href='/storefront/assets/icon_spritesheet-2c8173174a30370958101e9b5e0dc4a0503c16573b4e2c0961245849681b052e.svg#collection'></use> </svg> </span> </a> <span class="shared-item_cards-list-image_card_component__buttonSeparator"></span> <form method="post" action="/my/favorites/134187" data-controller="favorite-button" data-action="submit->favorite-button#submit favoritesStoreUpdated@window->favorite-button#updateFromStore"> <input type="hidden" name="_method" value="post" data-favorite-button-target="formMethod"> <button type="submit" aria-label="Add to Favorites" class="shared-item_cards-favorite_button_component__favoriteButton" data-favorite-button-target="favoriteButton" data-favorited="false" data-item-id="134187"> <svg width='100%' height='100%'> <use xlink:href='/storefront/assets/icon_spritesheet-2c8173174a30370958101e9b5e0dc4a0503c16573b4e2c0961245849681b052e.svg#heart'></use> </svg> </button> </form> </div> <div class="shared-item_cards-price_component__root"> $5 </div> <div class="shared-item_cards-list-image_card_component__ratingWrapper"><div class="shared-stars_rating_component__root"> <div class="shared-stars_rating_component__starRating" role="img" aria-label="Rated 4.39 out of 5, 144 reviews" > <span class="shared-stars_rating_component__star"> <svg width='100%' height='100%'> <use xlink:href='/storefront/assets/icon_spritesheet-2c8173174a30370958101e9b5e0dc4a0503c16573b4e2c0961245849681b052e.svg#stars_4.5'></use> </svg> </span> </div> <span aria-hidden="true" class="shared-stars_rating_component__starRatingCount">(144)</span> </div> </div> <div class="shared-item_cards-sales_component__root"> 992 Sales </div> <div class="shared-item_cards-list-image_card_component__lastUpdated shared-item_cards-list-image_card_component__tinyText"> Last updated: 19 Aug 12 </div> </div> <div class="shared-item_cards-list-image_card_component__coverWrapper"> <div class="shared-item_cards-list-image_card_component__addToCartDesktop"> <a class="shared-item_cards-add_to_cart_button_component__root" role="button" title="Add to cart" aria-label="Add to cart" href="/cart/configure_before_adding/134187" rel="nofollow" data-controller="cart-button modal-commander add-to-cart-event" data-action="click->modal-commander#open cartStoreUpdated@window->cart-button#updateFromStore click->add-to-cart-event#sendEvent" data-modal-commander-url-value="/my/cart_entries?item_id=134187" data-modal-commander-method-value="POST" data-cart-button-item-id-value="134187" data-cart-button-in-cart-class="shared-item_cards-add_to_cart_button_component__inCart" data-analytics-cart-button-payload="{"eventName":"add_to_cart","eventType":"user","quantityUpdate":false,"ecommerce":{"currency":"USD","value":"5.00","items":[{"affiliation":"codecanyon","itemId":134187,"itemName":"CSS3 Shadow Pack","itemBrand":"cosmocoder","itemCategory":"css","itemCategory2":"animations-and-effects","itemCategory3":null,"price":"5.00","quantity":1}]}}" > Add to Cart </a> </div> <div class="shared-item_cards-list-image_card_component__addToCartMobile"> <a class="shared-item_cards-add_to_cart_button_component__root shared-item_cards-add_to_cart_button_component__compact" role="button" title="Add to cart" aria-label="Add to cart" href="/cart/configure_before_adding/134187" rel="nofollow" data-controller="cart-button modal-commander add-to-cart-event" data-action="click->modal-commander#open cartStoreUpdated@window->cart-button#updateFromStore click->add-to-cart-event#sendEvent" data-modal-commander-url-value="/my/cart_entries?item_id=134187" data-modal-commander-method-value="POST" data-cart-button-item-id-value="134187" data-cart-button-in-cart-class="shared-item_cards-add_to_cart_button_component__inCart" data-analytics-cart-button-payload="{"eventName":"add_to_cart","eventType":"user","quantityUpdate":false,"ecommerce":{"currency":"USD","value":"5.00","items":[{"affiliation":"codecanyon","itemId":134187,"itemName":"CSS3 Shadow Pack","itemBrand":"cosmocoder","itemCategory":"css","itemCategory2":"animations-and-effects","itemCategory3":null,"price":"5.00","quantity":1}]}}" > <span class="shared-item_cards-add_to_cart_button_component__cartIcon"> <svg width='100%' height='100%'> <use xlink:href='/storefront/assets/icon_spritesheet-2c8173174a30370958101e9b5e0dc4a0503c16573b4e2c0961245849681b052e.svg#cart'></use> </svg> </span> </a> </div> </div> </div> </div> </div> </div> <div class="shared-item_cards-card_component__root"> <div class="shared-item_cards-list-image_card_component__root" data-favorites-loader-target="item" data-item-id="851059" data-price="5.00" data-site="codecanyon" > <div class="shared-item_cards-list-image_card_component__contentWrapper shared-item_cards-list-image_card_component__landscapeImage"> <a class="shared-item_cards-list-image_card_component__itemLinkOverlay" href="https://codecanyon.net/item/css3-ribbon-pack/851059" title="CSS3 Ribbon Pack" aria-label="View CSS3 Ribbon Pack" data-turbo="false" data-analytics-click-payload="{"eventName":"select_item","eventType":"user","ecommerce":{"currency":"USD","items":[{"affiliation":"codecanyon","itemId":851059,"itemName":"CSS3 Ribbon Pack","itemBrand":"cosmocoder","itemCategory":"css","itemCategory2":"animations-and-effects","itemCategory3":null,"price":"5.00","quantity":1}]}}"></a> <div class="shared-item_cards-list-image_card_component__imageWrapper"> <div class="shared-item_cards-preview_image_component__carousel shared-item_cards-preview_image_component__singleImage" style="padding-bottom: 50.847457627118644%" > <a class="shared-item_cards-preview_image_component__imageLink" data-turbo="false" data-analytics-click-payload="{"eventName":"select_item","eventType":"user","ecommerce":{"currency":"USD","items":[{"affiliation":"codecanyon","itemId":851059,"itemName":"CSS3 Ribbon Pack","itemBrand":"cosmocoder","itemCategory":"css","itemCategory2":"animations-and-effects","itemCategory3":null,"price":"5.00","quantity":1}]}}" href="https://codecanyon.net/item/css3-ribbon-pack/851059"> <img src="https://market-resized.envatousercontent.com/previews/files/9885930/css3-ribbon-pack-preview.jpg?w=590&h=300&cf_fit=crop&crop=top&format=auto&q=85&s=bc05f79358a512b90f1b7b0659f6fd361368ab75aa521d99f3dfaee61e54ebb1" loading="lazy" style="left: 0%" class="shared-item_cards-preview_image_component__image" alt="CSS3 Ribbon Pack" title="CSS3 Ribbon Pack" width="590" height="300" data-controller="image-preview" data-action="error->image-preview#setFallback" data-fallback="https://previews.customer.envatousercontent.com/files/9885930/css3-ribbon-pack-preview.jpg" data-carousel-target="image" /> </a></div> <div class="shared-item_cards-list-image_card_component__gradient" style="padding-top: 50.847457627118644%;"> <div class="shared-item_cards-list-image_card_component__buttons"> <a href="/my/bookmarks/new?item_id=851059" class="shared-item_cards-collection_button_component__collection" role="button" aria-label="Add to collection" title="Add to collection" rel="nofollow" data-controller="collection-button" data-action="collection-button#open" data-bookmark-button-target="bookmarkButton" data-item-id="851059" > <span class="shared-item_cards-collection_button_component__icon"> <svg width='100%' height='100%'> <use xlink:href='/storefront/assets/icon_spritesheet-2c8173174a30370958101e9b5e0dc4a0503c16573b4e2c0961245849681b052e.svg#collection'></use> </svg> </span> </a> <span class="shared-item_cards-list-image_card_component__buttonSeparator"></span> <form method="post" action="/my/favorites/851059" data-controller="favorite-button" data-action="submit->favorite-button#submit favoritesStoreUpdated@window->favorite-button#updateFromStore"> <input type="hidden" name="_method" value="post" data-favorite-button-target="formMethod"> <button type="submit" aria-label="Add to Favorites" class="shared-item_cards-favorite_button_component__favoriteButton" data-favorite-button-target="favoriteButton" data-favorited="false" data-item-id="851059"> <svg width='100%' height='100%'> <use xlink:href='/storefront/assets/icon_spritesheet-2c8173174a30370958101e9b5e0dc4a0503c16573b4e2c0961245849681b052e.svg#heart'></use> </svg> </button> </form> </div> </div> </div> <div class="shared-item_cards-list-image_card_component__detailsWrapper"> <h3 class="shared-item_cards-item_name_component__root"> <a class="shared-item_cards-item_name_component__itemNameLink" tabindex="0" data-turbo="false" data-analytics-click-payload="{"eventName":"select_item","eventType":"user","ecommerce":{"currency":"USD","items":[{"affiliation":"codecanyon","itemId":851059,"itemName":"CSS3 Ribbon Pack","itemBrand":"cosmocoder","itemCategory":"css","itemCategory2":"animations-and-effects","itemCategory3":null,"price":"5.00","quantity":1}]}}" href="https://codecanyon.net/item/css3-ribbon-pack/851059">CSS3 Ribbon Pack</a> </h3> <div> <div class="shared-item_cards-author_category_component__root"> <i>by</i> <a href="https://codecanyon.net/user/cosmocoder" class="shared-item_cards-author_category_component__link" rel="nofollow" data-turbo="false" > cosmocoder </a> in <a href="/category/css/animations-and-effects" class="shared-item_cards-author_category_component__link" > Animations And Effects </a> </div> </div> <div class="shared-item_cards-list-image_card_component__attrsWrapper"> <ul> <li class="shared-item_cards-attributes_component__attribute"> <span class="shared-item_cards-attributes_component__label">Software Version: </span> <span class="shared-item_cards-attributes_component__value">CSS 3</span> </li> </ul> <div class="shared-item_cards-included_files_component__root"> File Types Included: <ul> <li class="shared-item_cards-included_files_component__fileType">HTML</li> <li class="shared-item_cards-included_files_component__fileType">CSS</li> </ul> </div> </div> </div> <div class="shared-item_cards-list-image_card_component__priceWrapper"> <div class="shared-item_cards-list-image_card_component__info"> <div class="shared-item_cards-list-image_card_component__favAndCollections"> <a href="/my/bookmarks/new?item_id=851059" class="shared-item_cards-collection_button_component__collection" role="button" aria-label="Add to collection" title="Add to collection" rel="nofollow" data-controller="collection-button" data-action="collection-button#open" data-bookmark-button-target="bookmarkButton" data-item-id="851059" > <span class="shared-item_cards-collection_button_component__icon"> <svg width='100%' height='100%'> <use xlink:href='/storefront/assets/icon_spritesheet-2c8173174a30370958101e9b5e0dc4a0503c16573b4e2c0961245849681b052e.svg#collection'></use> </svg> </span> </a> <span class="shared-item_cards-list-image_card_component__buttonSeparator"></span> <form method="post" action="/my/favorites/851059" data-controller="favorite-button" data-action="submit->favorite-button#submit favoritesStoreUpdated@window->favorite-button#updateFromStore"> <input type="hidden" name="_method" value="post" data-favorite-button-target="formMethod"> <button type="submit" aria-label="Add to Favorites" class="shared-item_cards-favorite_button_component__favoriteButton" data-favorite-button-target="favoriteButton" data-favorited="false" data-item-id="851059"> <svg width='100%' height='100%'> <use xlink:href='/storefront/assets/icon_spritesheet-2c8173174a30370958101e9b5e0dc4a0503c16573b4e2c0961245849681b052e.svg#heart'></use> </svg> </button> </form> </div> <div class="shared-item_cards-price_component__root"> $5 </div> <div class="shared-item_cards-list-image_card_component__ratingWrapper"><div class="shared-stars_rating_component__root"> <div class="shared-stars_rating_component__starRating" role="img" aria-label="Rated 4.47 out of 5, 79 reviews" > <span class="shared-stars_rating_component__star"> <svg width='100%' height='100%'> <use xlink:href='/storefront/assets/icon_spritesheet-2c8173174a30370958101e9b5e0dc4a0503c16573b4e2c0961245849681b052e.svg#stars_4.5'></use> </svg> </span> </div> <span aria-hidden="true" class="shared-stars_rating_component__starRatingCount">(79)</span> </div> </div> <div class="shared-item_cards-sales_component__root"> 822 Sales </div> <div class="shared-item_cards-list-image_card_component__lastUpdated shared-item_cards-list-image_card_component__tinyText"> Last updated: 16 Jun 13 </div> </div> <div class="shared-item_cards-list-image_card_component__coverWrapper"> <div class="shared-item_cards-list-image_card_component__addToCartDesktop"> <a class="shared-item_cards-add_to_cart_button_component__root" role="button" title="Add to cart" aria-label="Add to cart" href="/cart/configure_before_adding/851059" rel="nofollow" data-controller="cart-button modal-commander add-to-cart-event" data-action="click->modal-commander#open cartStoreUpdated@window->cart-button#updateFromStore click->add-to-cart-event#sendEvent" data-modal-commander-url-value="/my/cart_entries?item_id=851059" data-modal-commander-method-value="POST" data-cart-button-item-id-value="851059" data-cart-button-in-cart-class="shared-item_cards-add_to_cart_button_component__inCart" data-analytics-cart-button-payload="{"eventName":"add_to_cart","eventType":"user","quantityUpdate":false,"ecommerce":{"currency":"USD","value":"5.00","items":[{"affiliation":"codecanyon","itemId":851059,"itemName":"CSS3 Ribbon Pack","itemBrand":"cosmocoder","itemCategory":"css","itemCategory2":"animations-and-effects","itemCategory3":null,"price":"5.00","quantity":1}]}}" > Add to Cart </a> </div> <div class="shared-item_cards-list-image_card_component__addToCartMobile"> <a class="shared-item_cards-add_to_cart_button_component__root shared-item_cards-add_to_cart_button_component__compact" role="button" title="Add to cart" aria-label="Add to cart" href="/cart/configure_before_adding/851059" rel="nofollow" data-controller="cart-button modal-commander add-to-cart-event" data-action="click->modal-commander#open cartStoreUpdated@window->cart-button#updateFromStore click->add-to-cart-event#sendEvent" data-modal-commander-url-value="/my/cart_entries?item_id=851059" data-modal-commander-method-value="POST" data-cart-button-item-id-value="851059" data-cart-button-in-cart-class="shared-item_cards-add_to_cart_button_component__inCart" data-analytics-cart-button-payload="{"eventName":"add_to_cart","eventType":"user","quantityUpdate":false,"ecommerce":{"currency":"USD","value":"5.00","items":[{"affiliation":"codecanyon","itemId":851059,"itemName":"CSS3 Ribbon Pack","itemBrand":"cosmocoder","itemCategory":"css","itemCategory2":"animations-and-effects","itemCategory3":null,"price":"5.00","quantity":1}]}}" > <span class="shared-item_cards-add_to_cart_button_component__cartIcon"> <svg width='100%' height='100%'> <use xlink:href='/storefront/assets/icon_spritesheet-2c8173174a30370958101e9b5e0dc4a0503c16573b4e2c0961245849681b052e.svg#cart'></use> </svg> </span> </a> </div> </div> </div> </div> </div> </div> <div class="shared-item_cards-card_component__root"> <div class="shared-item_cards-list-image_card_component__root" data-favorites-loader-target="item" data-item-id="1309670" data-price="5.00" data-site="codecanyon" > <div class="shared-item_cards-list-image_card_component__contentWrapper shared-item_cards-list-image_card_component__landscapeImage"> <a class="shared-item_cards-list-image_card_component__itemLinkOverlay" href="https://codecanyon.net/item/ihc-portfolio-css3-image-hover-caption/1309670" title="IHC - Portfolio CSS3 Image Hover Caption" aria-label="View IHC - Portfolio CSS3 Image Hover Caption" data-turbo="false" data-analytics-click-payload="{"eventName":"select_item","eventType":"user","ecommerce":{"currency":"USD","items":[{"affiliation":"codecanyon","itemId":1309670,"itemName":"IHC - Portfolio CSS3 Image Hover Caption","itemBrand":"awps","itemCategory":"css","itemCategory2":"animations-and-effects","itemCategory3":null,"price":"5.00","quantity":1}]}}"></a> <div class="shared-item_cards-list-image_card_component__imageWrapper"> <div class="shared-item_cards-preview_image_component__carousel shared-item_cards-preview_image_component__singleImage" style="padding-bottom: 50.847457627118644%" > <a class="shared-item_cards-preview_image_component__imageLink" data-turbo="false" data-analytics-click-payload="{"eventName":"select_item","eventType":"user","ecommerce":{"currency":"USD","items":[{"affiliation":"codecanyon","itemId":1309670,"itemName":"IHC - Portfolio CSS3 Image Hover Caption","itemBrand":"awps","itemCategory":"css","itemCategory2":"animations-and-effects","itemCategory3":null,"price":"5.00","quantity":1}]}}" href="https://codecanyon.net/item/ihc-portfolio-css3-image-hover-caption/1309670"> <img src="https://market-resized.envatousercontent.com/previews/files/15169370/001.jpg?w=590&h=300&cf_fit=crop&crop=top&format=auto&q=85&s=a6f7a81d3a49088284ac7f1ea0442bf82e66966be37748eba8981efdb8e5cfc7" loading="lazy" style="left: 0%" class="shared-item_cards-preview_image_component__image" alt="IHC - Portfolio CSS3 Image Hover Caption" title="IHC - Portfolio CSS3 Image Hover Caption" width="590" height="300" data-controller="image-preview" data-action="error->image-preview#setFallback" data-fallback="https://previews.customer.envatousercontent.com/files/15169370/001.jpg" data-carousel-target="image" /> </a></div> <div class="shared-item_cards-list-image_card_component__gradient" style="padding-top: 50.847457627118644%;"> <div class="shared-item_cards-list-image_card_component__buttons"> <a href="/my/bookmarks/new?item_id=1309670" class="shared-item_cards-collection_button_component__collection" role="button" aria-label="Add to collection" title="Add to collection" rel="nofollow" data-controller="collection-button" data-action="collection-button#open" data-bookmark-button-target="bookmarkButton" data-item-id="1309670" > <span class="shared-item_cards-collection_button_component__icon"> <svg width='100%' height='100%'> <use xlink:href='/storefront/assets/icon_spritesheet-2c8173174a30370958101e9b5e0dc4a0503c16573b4e2c0961245849681b052e.svg#collection'></use> </svg> </span> </a> <span class="shared-item_cards-list-image_card_component__buttonSeparator"></span> <form method="post" action="/my/favorites/1309670" data-controller="favorite-button" data-action="submit->favorite-button#submit favoritesStoreUpdated@window->favorite-button#updateFromStore"> <input type="hidden" name="_method" value="post" data-favorite-button-target="formMethod"> <button type="submit" aria-label="Add to Favorites" class="shared-item_cards-favorite_button_component__favoriteButton" data-favorite-button-target="favoriteButton" data-favorited="false" data-item-id="1309670"> <svg width='100%' height='100%'> <use xlink:href='/storefront/assets/icon_spritesheet-2c8173174a30370958101e9b5e0dc4a0503c16573b4e2c0961245849681b052e.svg#heart'></use> </svg> </button> </form> </div> </div> </div> <div class="shared-item_cards-list-image_card_component__detailsWrapper"> <h3 class="shared-item_cards-item_name_component__root"> <a class="shared-item_cards-item_name_component__itemNameLink" tabindex="0" data-turbo="false" data-analytics-click-payload="{"eventName":"select_item","eventType":"user","ecommerce":{"currency":"USD","items":[{"affiliation":"codecanyon","itemId":1309670,"itemName":"IHC - Portfolio CSS3 Image Hover Caption","itemBrand":"awps","itemCategory":"css","itemCategory2":"animations-and-effects","itemCategory3":null,"price":"5.00","quantity":1}]}}" href="https://codecanyon.net/item/ihc-portfolio-css3-image-hover-caption/1309670">IHC - Portfolio CSS3 Image Hover Caption</a> </h3> <div> <div class="shared-item_cards-author_category_component__root"> <i>by</i> <a href="https://codecanyon.net/user/awps" class="shared-item_cards-author_category_component__link" rel="nofollow" data-turbo="false" > awps </a> in <a href="/category/css/animations-and-effects" class="shared-item_cards-author_category_component__link" > Animations And Effects </a> </div> </div> <div class="shared-item_cards-list-image_card_component__attrsWrapper"> <ul> <li class="shared-item_cards-attributes_component__attribute"> <span class="shared-item_cards-attributes_component__label">Software Version: </span> <span class="shared-item_cards-attributes_component__value">CSS 2 - 3, Other</span> </li> </ul> <div class="shared-item_cards-included_files_component__root"> File Types Included: <ul> <li class="shared-item_cards-included_files_component__fileType">HTML</li> <li class="shared-item_cards-included_files_component__fileType">CSS</li> </ul> </div> </div> </div> <div class="shared-item_cards-list-image_card_component__priceWrapper"> <div class="shared-item_cards-list-image_card_component__info"> <div class="shared-item_cards-list-image_card_component__favAndCollections"> <a href="/my/bookmarks/new?item_id=1309670" class="shared-item_cards-collection_button_component__collection" role="button" aria-label="Add to collection" title="Add to collection" rel="nofollow" data-controller="collection-button" data-action="collection-button#open" data-bookmark-button-target="bookmarkButton" data-item-id="1309670" > <span class="shared-item_cards-collection_button_component__icon"> <svg width='100%' height='100%'> <use xlink:href='/storefront/assets/icon_spritesheet-2c8173174a30370958101e9b5e0dc4a0503c16573b4e2c0961245849681b052e.svg#collection'></use> </svg> </span> </a> <span class="shared-item_cards-list-image_card_component__buttonSeparator"></span> <form method="post" action="/my/favorites/1309670" data-controller="favorite-button" data-action="submit->favorite-button#submit favoritesStoreUpdated@window->favorite-button#updateFromStore"> <input type="hidden" name="_method" value="post" data-favorite-button-target="formMethod"> <button type="submit" aria-label="Add to Favorites" class="shared-item_cards-favorite_button_component__favoriteButton" data-favorite-button-target="favoriteButton" data-favorited="false" data-item-id="1309670"> <svg width='100%' height='100%'> <use xlink:href='/storefront/assets/icon_spritesheet-2c8173174a30370958101e9b5e0dc4a0503c16573b4e2c0961245849681b052e.svg#heart'></use> </svg> </button> </form> </div> <div class="shared-item_cards-price_component__root"> $5 </div> <div class="shared-item_cards-list-image_card_component__ratingWrapper"><div class="shared-stars_rating_component__root"> <div class="shared-stars_rating_component__starRating" role="img" aria-label="Rated 4.62 out of 5, 34 reviews" > <span class="shared-stars_rating_component__star"> <svg width='100%' height='100%'> <use xlink:href='/storefront/assets/icon_spritesheet-2c8173174a30370958101e9b5e0dc4a0503c16573b4e2c0961245849681b052e.svg#stars_4.5'></use> </svg> </span> </div> <span aria-hidden="true" class="shared-stars_rating_component__starRatingCount">(34)</span> </div> </div> <div class="shared-item_cards-sales_component__root"> 284 Sales </div> <div class="shared-item_cards-list-image_card_component__lastUpdated shared-item_cards-list-image_card_component__tinyText"> Last updated: 14 Jan 12 </div> </div> <div class="shared-item_cards-list-image_card_component__coverWrapper"> <div class="shared-item_cards-list-image_card_component__addToCartDesktop"> <a class="shared-item_cards-add_to_cart_button_component__root" role="button" title="Add to cart" aria-label="Add to cart" href="/cart/configure_before_adding/1309670" rel="nofollow" data-controller="cart-button modal-commander add-to-cart-event" data-action="click->modal-commander#open cartStoreUpdated@window->cart-button#updateFromStore click->add-to-cart-event#sendEvent" data-modal-commander-url-value="/my/cart_entries?item_id=1309670" data-modal-commander-method-value="POST" data-cart-button-item-id-value="1309670" data-cart-button-in-cart-class="shared-item_cards-add_to_cart_button_component__inCart" data-analytics-cart-button-payload="{"eventName":"add_to_cart","eventType":"user","quantityUpdate":false,"ecommerce":{"currency":"USD","value":"5.00","items":[{"affiliation":"codecanyon","itemId":1309670,"itemName":"IHC - Portfolio CSS3 Image Hover Caption","itemBrand":"awps","itemCategory":"css","itemCategory2":"animations-and-effects","itemCategory3":null,"price":"5.00","quantity":1}]}}" > Add to Cart </a> </div> <div class="shared-item_cards-list-image_card_component__addToCartMobile"> <a class="shared-item_cards-add_to_cart_button_component__root shared-item_cards-add_to_cart_button_component__compact" role="button" title="Add to cart" aria-label="Add to cart" href="/cart/configure_before_adding/1309670" rel="nofollow" data-controller="cart-button modal-commander add-to-cart-event" data-action="click->modal-commander#open cartStoreUpdated@window->cart-button#updateFromStore click->add-to-cart-event#sendEvent" data-modal-commander-url-value="/my/cart_entries?item_id=1309670" data-modal-commander-method-value="POST" data-cart-button-item-id-value="1309670" data-cart-button-in-cart-class="shared-item_cards-add_to_cart_button_component__inCart" data-analytics-cart-button-payload="{"eventName":"add_to_cart","eventType":"user","quantityUpdate":false,"ecommerce":{"currency":"USD","value":"5.00","items":[{"affiliation":"codecanyon","itemId":1309670,"itemName":"IHC - Portfolio CSS3 Image Hover Caption","itemBrand":"awps","itemCategory":"css","itemCategory2":"animations-and-effects","itemCategory3":null,"price":"5.00","quantity":1}]}}" > <span class="shared-item_cards-add_to_cart_button_component__cartIcon"> <svg width='100%' height='100%'> <use xlink:href='/storefront/assets/icon_spritesheet-2c8173174a30370958101e9b5e0dc4a0503c16573b4e2c0961245849681b052e.svg#cart'></use> </svg> </span> </a> </div> </div> </div> </div> </div> </div> <div class="shared-item_cards-card_component__root"> <div class="shared-item_cards-list-image_card_component__root" data-favorites-loader-target="item" data-item-id="1783098" data-price="7.00" data-site="codecanyon" > <div class="shared-item_cards-list-image_card_component__contentWrapper shared-item_cards-list-image_card_component__landscapeImage"> <a class="shared-item_cards-list-image_card_component__itemLinkOverlay" href="https://codecanyon.net/item/pristine-slider-pure-css3-interactive-slider/1783098" title="Pristine Slider: Pure CSS3 interactive slider." aria-label="View Pristine Slider: Pure CSS3 interactive slider." data-turbo="false" data-analytics-click-payload="{"eventName":"select_item","eventType":"user","ecommerce":{"currency":"USD","items":[{"affiliation":"codecanyon","itemId":1783098,"itemName":"Pristine Slider: Pure CSS3 interactive slider.","itemBrand":"nickys","itemCategory":"css","itemCategory2":"animations-and-effects","itemCategory3":null,"price":"7.00","quantity":1}]}}"></a> <div class="shared-item_cards-list-image_card_component__imageWrapper"> <div class="shared-item_cards-preview_image_component__carousel shared-item_cards-preview_image_component__singleImage" style="padding-bottom: 50.847457627118644%" > <a class="shared-item_cards-preview_image_component__imageLink" data-turbo="false" data-analytics-click-payload="{"eventName":"select_item","eventType":"user","ecommerce":{"currency":"USD","items":[{"affiliation":"codecanyon","itemId":1783098,"itemName":"Pristine Slider: Pure CSS3 interactive slider.","itemBrand":"nickys","itemCategory":"css","itemCategory2":"animations-and-effects","itemCategory3":null,"price":"7.00","quantity":1}]}}" href="https://codecanyon.net/item/pristine-slider-pure-css3-interactive-slider/1783098"> <img src="https://market-resized.envatousercontent.com/previews/files/20559347/pristine.png?w=590&h=300&cf_fit=crop&crop=top&format=auto&q=85&s=2ac2e8604cf7258e9009e8bd1c0d6970edffbabd73d0832471a4729a9cb6d61b" loading="lazy" style="left: 0%" class="shared-item_cards-preview_image_component__image" alt="Pristine Slider: Pure CSS3 interactive slider." title="Pristine Slider: Pure CSS3 interactive slider." width="590" height="300" data-controller="image-preview" data-action="error->image-preview#setFallback" data-fallback="https://previews.customer.envatousercontent.com/files/20559347/pristine.png" data-carousel-target="image" /> </a></div> <div class="shared-item_cards-list-image_card_component__gradient" style="padding-top: 50.847457627118644%;"> <div class="shared-item_cards-list-image_card_component__buttons"> <a href="/my/bookmarks/new?item_id=1783098" class="shared-item_cards-collection_button_component__collection" role="button" aria-label="Add to collection" title="Add to collection" rel="nofollow" data-controller="collection-button" data-action="collection-button#open" data-bookmark-button-target="bookmarkButton" data-item-id="1783098" > <span class="shared-item_cards-collection_button_component__icon"> <svg width='100%' height='100%'> <use xlink:href='/storefront/assets/icon_spritesheet-2c8173174a30370958101e9b5e0dc4a0503c16573b4e2c0961245849681b052e.svg#collection'></use> </svg> </span> </a> <span class="shared-item_cards-list-image_card_component__buttonSeparator"></span> <form method="post" action="/my/favorites/1783098" data-controller="favorite-button" data-action="submit->favorite-button#submit favoritesStoreUpdated@window->favorite-button#updateFromStore"> <input type="hidden" name="_method" value="post" data-favorite-button-target="formMethod"> <button type="submit" aria-label="Add to Favorites" class="shared-item_cards-favorite_button_component__favoriteButton" data-favorite-button-target="favoriteButton" data-favorited="false" data-item-id="1783098"> <svg width='100%' height='100%'> <use xlink:href='/storefront/assets/icon_spritesheet-2c8173174a30370958101e9b5e0dc4a0503c16573b4e2c0961245849681b052e.svg#heart'></use> </svg> </button> </form> </div> </div> </div> <div class="shared-item_cards-list-image_card_component__detailsWrapper"> <h3 class="shared-item_cards-item_name_component__root"> <a class="shared-item_cards-item_name_component__itemNameLink" tabindex="0" data-turbo="false" data-analytics-click-payload="{"eventName":"select_item","eventType":"user","ecommerce":{"currency":"USD","items":[{"affiliation":"codecanyon","itemId":1783098,"itemName":"Pristine Slider: Pure CSS3 interactive slider.","itemBrand":"nickys","itemCategory":"css","itemCategory2":"animations-and-effects","itemCategory3":null,"price":"7.00","quantity":1}]}}" href="https://codecanyon.net/item/pristine-slider-pure-css3-interactive-slider/1783098">Pristine Slider: Pure CSS3 interactive slider.</a> </h3> <div> <div class="shared-item_cards-author_category_component__root"> <i>by</i> <a href="https://codecanyon.net/user/nickys" class="shared-item_cards-author_category_component__link" rel="nofollow" data-turbo="false" > nickys </a> in <a href="/category/css/animations-and-effects" class="shared-item_cards-author_category_component__link" > Animations And Effects </a> </div> </div> <div class="shared-item_cards-list-image_card_component__attrsWrapper"> <ul> <li class="shared-item_cards-attributes_component__attribute"> <span class="shared-item_cards-attributes_component__label">Software Version: </span> <span class="shared-item_cards-attributes_component__value">CSS 2 - 3</span> </li> </ul> <div class="shared-item_cards-included_files_component__root"> File Types Included: <ul> <li class="shared-item_cards-included_files_component__fileType">JavaScript JS</li> <li class="shared-item_cards-included_files_component__fileType">HTML</li> <li class="shared-item_cards-included_files_component__fileType">CSS</li> <li class="shared-item_cards-included_files_component__fileType">PHP</li> </ul> </div> </div> </div> <div class="shared-item_cards-list-image_card_component__priceWrapper"> <div class="shared-item_cards-list-image_card_component__info"> <div class="shared-item_cards-list-image_card_component__favAndCollections"> <a href="/my/bookmarks/new?item_id=1783098" class="shared-item_cards-collection_button_component__collection" role="button" aria-label="Add to collection" title="Add to collection" rel="nofollow" data-controller="collection-button" data-action="collection-button#open" data-bookmark-button-target="bookmarkButton" data-item-id="1783098" > <span class="shared-item_cards-collection_button_component__icon"> <svg width='100%' height='100%'> <use xlink:href='/storefront/assets/icon_spritesheet-2c8173174a30370958101e9b5e0dc4a0503c16573b4e2c0961245849681b052e.svg#collection'></use> </svg> </span> </a> <span class="shared-item_cards-list-image_card_component__buttonSeparator"></span> <form method="post" action="/my/favorites/1783098" data-controller="favorite-button" data-action="submit->favorite-button#submit favoritesStoreUpdated@window->favorite-button#updateFromStore"> <input type="hidden" name="_method" value="post" data-favorite-button-target="formMethod"> <button type="submit" aria-label="Add to Favorites" class="shared-item_cards-favorite_button_component__favoriteButton" data-favorite-button-target="favoriteButton" data-favorited="false" data-item-id="1783098"> <svg width='100%' height='100%'> <use xlink:href='/storefront/assets/icon_spritesheet-2c8173174a30370958101e9b5e0dc4a0503c16573b4e2c0961245849681b052e.svg#heart'></use> </svg> </button> </form> </div> <div class="shared-item_cards-price_component__root"> $7 </div> <div class="shared-item_cards-list-image_card_component__ratingWrapper"><div class="shared-stars_rating_component__root"> <div class="shared-stars_rating_component__starRating" role="img" aria-label="Rated 4.19 out of 5, 16 reviews" > <span class="shared-stars_rating_component__star"> <svg width='100%' height='100%'> <use xlink:href='/storefront/assets/icon_spritesheet-2c8173174a30370958101e9b5e0dc4a0503c16573b4e2c0961245849681b052e.svg#stars_4.0'></use> </svg> </span> </div> <span aria-hidden="true" class="shared-stars_rating_component__starRatingCount">(16)</span> </div> </div> <div class="shared-item_cards-sales_component__root"> 248 Sales </div> <div class="shared-item_cards-list-image_card_component__lastUpdated shared-item_cards-list-image_card_component__tinyText"> Last updated: 28 Mar 12 </div> </div> <div class="shared-item_cards-list-image_card_component__coverWrapper"> <a class="shared-item_cards-add_to_cart_button_component__root shared-item_cards-add_to_cart_button_component__compact" role="button" title="Add to cart" aria-label="Add to cart" href="/cart/configure_before_adding/1783098" rel="nofollow" data-controller="cart-button modal-commander add-to-cart-event" data-action="click->modal-commander#open cartStoreUpdated@window->cart-button#updateFromStore click->add-to-cart-event#sendEvent" data-modal-commander-url-value="/my/cart_entries?item_id=1783098" data-modal-commander-method-value="POST" data-cart-button-item-id-value="1783098" data-cart-button-in-cart-class="shared-item_cards-add_to_cart_button_component__inCart" data-analytics-cart-button-payload="{"eventName":"add_to_cart","eventType":"user","quantityUpdate":false,"ecommerce":{"currency":"USD","value":"7.00","items":[{"affiliation":"codecanyon","itemId":1783098,"itemName":"Pristine Slider: Pure CSS3 interactive slider.","itemBrand":"nickys","itemCategory":"css","itemCategory2":"animations-and-effects","itemCategory3":null,"price":"7.00","quantity":1}]}}" > <span class="shared-item_cards-add_to_cart_button_component__cartIcon"> <svg width='100%' height='100%'> <use xlink:href='/storefront/assets/icon_spritesheet-2c8173174a30370958101e9b5e0dc4a0503c16573b4e2c0961245849681b052e.svg#cart'></use> </svg> </span> </a> <a href="https://codecanyon.net/item/pristine-slider-pure-css3-interactive-slider/full_screen_preview/1783098" class="shared-item_cards-preview_button_with_analytics_component__root" target="_blank" rel="noopener" > Live Preview </a> </div> </div> </div> </div> </div> <div class="shared-item_cards-card_component__root"> <div class="shared-item_cards-list-image_card_component__root" data-favorites-loader-target="item" data-item-id="12472316" data-price="13.00" data-site="codecanyon" > <div class="shared-item_cards-list-image_card_component__contentWrapper shared-item_cards-list-image_card_component__landscapeImage"> <a class="shared-item_cards-list-image_card_component__itemLinkOverlay" href="https://codecanyon.net/item/aero-css3-hover-effects/12472316" title="Aero - Image Hover Effects" aria-label="View Aero - Image Hover Effects" data-turbo="false" data-analytics-click-payload="{"eventName":"select_item","eventType":"user","ecommerce":{"currency":"USD","items":[{"affiliation":"codecanyon","itemId":12472316,"itemName":"Aero - Image Hover Effects","itemBrand":"ohkimur","itemCategory":"css","itemCategory2":"animations-and-effects","itemCategory3":null,"price":"13.00","quantity":1}]}}"></a> <div class="shared-item_cards-list-image_card_component__imageWrapper"> <div class="shared-item_cards-preview_image_component__carousel shared-item_cards-preview_image_component__singleImage" style="padding-bottom: 50.847457627118644%" > <a class="shared-item_cards-preview_image_component__imageLink" data-turbo="false" data-analytics-click-payload="{"eventName":"select_item","eventType":"user","ecommerce":{"currency":"USD","items":[{"affiliation":"codecanyon","itemId":12472316,"itemName":"Aero - Image Hover Effects","itemBrand":"ohkimur","itemCategory":"css","itemCategory2":"animations-and-effects","itemCategory3":null,"price":"13.00","quantity":1}]}}" href="https://codecanyon.net/item/aero-css3-hover-effects/12472316"> <img src="https://market-resized.envatousercontent.com/previews/files/383753832/Envato+Preview.png?w=590&h=300&cf_fit=crop&crop=top&format=auto&q=85&s=aa82fcfcb8e0e84c3aed520a523b0443f0c698c59c76bfe2fa00b207304f2aaa" loading="lazy" style="left: 0%" class="shared-item_cards-preview_image_component__image" alt="Aero - Image Hover Effects" title="Aero - Image Hover Effects" width="590" height="300" data-controller="image-preview" data-action="error->image-preview#setFallback" data-fallback="https://previews.customer.envatousercontent.com/files/383753832/Envato%20Preview.png" data-carousel-target="image" /> </a></div> <div class="shared-item_cards-list-image_card_component__gradient" style="padding-top: 50.847457627118644%;"> <div class="shared-item_cards-list-image_card_component__buttons"> <a href="/my/bookmarks/new?item_id=12472316" class="shared-item_cards-collection_button_component__collection" role="button" aria-label="Add to collection" title="Add to collection" rel="nofollow" data-controller="collection-button" data-action="collection-button#open" data-bookmark-button-target="bookmarkButton" data-item-id="12472316" > <span class="shared-item_cards-collection_button_component__icon"> <svg width='100%' height='100%'> <use xlink:href='/storefront/assets/icon_spritesheet-2c8173174a30370958101e9b5e0dc4a0503c16573b4e2c0961245849681b052e.svg#collection'></use> </svg> </span> </a> <span class="shared-item_cards-list-image_card_component__buttonSeparator"></span> <form method="post" action="/my/favorites/12472316" data-controller="favorite-button" data-action="submit->favorite-button#submit favoritesStoreUpdated@window->favorite-button#updateFromStore"> <input type="hidden" name="_method" value="post" data-favorite-button-target="formMethod"> <button type="submit" aria-label="Add to Favorites" class="shared-item_cards-favorite_button_component__favoriteButton" data-favorite-button-target="favoriteButton" data-favorited="false" data-item-id="12472316"> <svg width='100%' height='100%'> <use xlink:href='/storefront/assets/icon_spritesheet-2c8173174a30370958101e9b5e0dc4a0503c16573b4e2c0961245849681b052e.svg#heart'></use> </svg> </button> </form> </div> </div> </div> <div class="shared-item_cards-list-image_card_component__detailsWrapper"> <h3 class="shared-item_cards-item_name_component__root"> <a class="shared-item_cards-item_name_component__itemNameLink" tabindex="0" data-turbo="false" data-analytics-click-payload="{"eventName":"select_item","eventType":"user","ecommerce":{"currency":"USD","items":[{"affiliation":"codecanyon","itemId":12472316,"itemName":"Aero - Image Hover Effects","itemBrand":"ohkimur","itemCategory":"css","itemCategory2":"animations-and-effects","itemCategory3":null,"price":"13.00","quantity":1}]}}" href="https://codecanyon.net/item/aero-css3-hover-effects/12472316">Aero - Image Hover Effects</a> </h3> <div> <div class="shared-item_cards-author_category_component__root"> <i>by</i> <a href="https://codecanyon.net/user/ohkimur" class="shared-item_cards-author_category_component__link" rel="nofollow" data-turbo="false" > ohkimur </a> in <a href="/category/css/animations-and-effects" class="shared-item_cards-author_category_component__link" > Animations And Effects </a> </div> </div> <div class="shared-item_cards-list-image_card_component__attrsWrapper"> <ul> <li class="shared-item_cards-attributes_component__attribute"> <span class="shared-item_cards-attributes_component__label">Software Version: </span> <span class="shared-item_cards-attributes_component__value">CSS 3</span> </li> </ul> <div class="shared-item_cards-included_files_component__root"> File Types Included: <ul> <li class="shared-item_cards-included_files_component__fileType">JavaScript JS</li> <li class="shared-item_cards-included_files_component__fileType">JavaScript JSON</li> <li class="shared-item_cards-included_files_component__fileType">HTML</li> <li class="shared-item_cards-included_files_component__fileType">CSS</li> <li class="shared-item_cards-included_files_component__fileType">Sass</li> <li class="shared-item_cards-included_files_component__fileType">Layered PNG</li> </ul> </div> </div> </div> <div class="shared-item_cards-list-image_card_component__priceWrapper"> <div class="shared-item_cards-list-image_card_component__info"> <div class="shared-item_cards-list-image_card_component__favAndCollections"> <a href="/my/bookmarks/new?item_id=12472316" class="shared-item_cards-collection_button_component__collection" role="button" aria-label="Add to collection" title="Add to collection" rel="nofollow" data-controller="collection-button" data-action="collection-button#open" data-bookmark-button-target="bookmarkButton" data-item-id="12472316" > <span class="shared-item_cards-collection_button_component__icon"> <svg width='100%' height='100%'> <use xlink:href='/storefront/assets/icon_spritesheet-2c8173174a30370958101e9b5e0dc4a0503c16573b4e2c0961245849681b052e.svg#collection'></use> </svg> </span> </a> <span class="shared-item_cards-list-image_card_component__buttonSeparator"></span> <form method="post" action="/my/favorites/12472316" data-controller="favorite-button" data-action="submit->favorite-button#submit favoritesStoreUpdated@window->favorite-button#updateFromStore"> <input type="hidden" name="_method" value="post" data-favorite-button-target="formMethod"> <button type="submit" aria-label="Add to Favorites" class="shared-item_cards-favorite_button_component__favoriteButton" data-favorite-button-target="favoriteButton" data-favorited="false" data-item-id="12472316"> <svg width='100%' height='100%'> <use xlink:href='/storefront/assets/icon_spritesheet-2c8173174a30370958101e9b5e0dc4a0503c16573b4e2c0961245849681b052e.svg#heart'></use> </svg> </button> </form> </div> <div class="shared-item_cards-price_component__root"> $13 </div> <div class="shared-item_cards-list-image_card_component__ratingWrapper"><div class="shared-stars_rating_component__root"> <div class="shared-stars_rating_component__starRating" role="img" aria-label="Rated 4.4 out of 5, 10 reviews" > <span class="shared-stars_rating_component__star"> <svg width='100%' height='100%'> <use xlink:href='/storefront/assets/icon_spritesheet-2c8173174a30370958101e9b5e0dc4a0503c16573b4e2c0961245849681b052e.svg#stars_4.5'></use> </svg> </span> </div> <span aria-hidden="true" class="shared-stars_rating_component__starRatingCount">(10)</span> </div> </div> <div class="shared-item_cards-sales_component__root"> 220 Sales </div> <div class="shared-item_cards-list-image_card_component__lastUpdated shared-item_cards-list-image_card_component__tinyText"> Last updated: 18 Mar 22 </div> </div> <div class="shared-item_cards-list-image_card_component__coverWrapper"> <a class="shared-item_cards-add_to_cart_button_component__root shared-item_cards-add_to_cart_button_component__compact" role="button" title="Add to cart" aria-label="Add to cart" href="/cart/configure_before_adding/12472316" rel="nofollow" data-controller="cart-button modal-commander add-to-cart-event" data-action="click->modal-commander#open cartStoreUpdated@window->cart-button#updateFromStore click->add-to-cart-event#sendEvent" data-modal-commander-url-value="/my/cart_entries?item_id=12472316" data-modal-commander-method-value="POST" data-cart-button-item-id-value="12472316" data-cart-button-in-cart-class="shared-item_cards-add_to_cart_button_component__inCart" data-analytics-cart-button-payload="{"eventName":"add_to_cart","eventType":"user","quantityUpdate":false,"ecommerce":{"currency":"USD","value":"13.00","items":[{"affiliation":"codecanyon","itemId":12472316,"itemName":"Aero - Image Hover Effects","itemBrand":"ohkimur","itemCategory":"css","itemCategory2":"animations-and-effects","itemCategory3":null,"price":"13.00","quantity":1}]}}" > <span class="shared-item_cards-add_to_cart_button_component__cartIcon"> <svg width='100%' height='100%'> <use xlink:href='/storefront/assets/icon_spritesheet-2c8173174a30370958101e9b5e0dc4a0503c16573b4e2c0961245849681b052e.svg#cart'></use> </svg> </span> </a> <a href="https://codecanyon.net/item/aero-css3-hover-effects/full_screen_preview/12472316" class="shared-item_cards-preview_button_with_analytics_component__root" target="_blank" rel="noopener" > Live Preview </a> </div> </div> </div> </div> </div> <div class="shared-item_cards-card_component__root"> <div class="shared-item_cards-list-image_card_component__root" data-favorites-loader-target="item" data-item-id="831087" data-price="3.00" data-site="codecanyon" > <div class="shared-item_cards-list-image_card_component__contentWrapper shared-item_cards-list-image_card_component__landscapeImage"> <a class="shared-item_cards-list-image_card_component__itemLinkOverlay" href="https://codecanyon.net/item/full-css3-tooltip/831087" title="Full CSS3 Tooltip" aria-label="View Full CSS3 Tooltip" data-turbo="false" data-analytics-click-payload="{"eventName":"select_item","eventType":"user","ecommerce":{"currency":"USD","items":[{"affiliation":"codecanyon","itemId":831087,"itemName":"Full CSS3 Tooltip","itemBrand":"vp76","itemCategory":"css","itemCategory2":"animations-and-effects","itemCategory3":null,"price":"3.00","quantity":1}]}}"></a> <div class="shared-item_cards-list-image_card_component__imageWrapper"> <div class="shared-item_cards-preview_image_component__carousel shared-item_cards-preview_image_component__singleImage" style="padding-bottom: 50.847457627118644%" > <a class="shared-item_cards-preview_image_component__imageLink" data-turbo="false" data-analytics-click-payload="{"eventName":"select_item","eventType":"user","ecommerce":{"currency":"USD","items":[{"affiliation":"codecanyon","itemId":831087,"itemName":"Full CSS3 Tooltip","itemBrand":"vp76","itemCategory":"css","itemCategory2":"animations-and-effects","itemCategory3":null,"price":"3.00","quantity":1}]}}" href="https://codecanyon.net/item/full-css3-tooltip/831087"> <img src="https://market-resized.envatousercontent.com/previews/files/9573124/Img.jpg?w=590&h=300&cf_fit=crop&crop=top&format=auto&q=85&s=a2bf3b264f56d4b90538a5d9595df8db0b148bf4a94e9c5dbeb2bba337f60668" loading="lazy" style="left: 0%" class="shared-item_cards-preview_image_component__image" alt="Full CSS3 Tooltip" title="Full CSS3 Tooltip" width="590" height="300" data-controller="image-preview" data-action="error->image-preview#setFallback" data-fallback="https://previews.customer.envatousercontent.com/files/9573124/Img.jpg" data-carousel-target="image" /> </a></div> <div class="shared-item_cards-list-image_card_component__gradient" style="padding-top: 50.847457627118644%;"> <div class="shared-item_cards-list-image_card_component__buttons"> <a href="/my/bookmarks/new?item_id=831087" class="shared-item_cards-collection_button_component__collection" role="button" aria-label="Add to collection" title="Add to collection" rel="nofollow" data-controller="collection-button" data-action="collection-button#open" data-bookmark-button-target="bookmarkButton" data-item-id="831087" > <span class="shared-item_cards-collection_button_component__icon"> <svg width='100%' height='100%'> <use xlink:href='/storefront/assets/icon_spritesheet-2c8173174a30370958101e9b5e0dc4a0503c16573b4e2c0961245849681b052e.svg#collection'></use> </svg> </span> </a> <span class="shared-item_cards-list-image_card_component__buttonSeparator"></span> <form method="post" action="/my/favorites/831087" data-controller="favorite-button" data-action="submit->favorite-button#submit favoritesStoreUpdated@window->favorite-button#updateFromStore"> <input type="hidden" name="_method" value="post" data-favorite-button-target="formMethod"> <button type="submit" aria-label="Add to Favorites" class="shared-item_cards-favorite_button_component__favoriteButton" data-favorite-button-target="favoriteButton" data-favorited="false" data-item-id="831087"> <svg width='100%' height='100%'> <use xlink:href='/storefront/assets/icon_spritesheet-2c8173174a30370958101e9b5e0dc4a0503c16573b4e2c0961245849681b052e.svg#heart'></use> </svg> </button> </form> </div> </div> </div> <div class="shared-item_cards-list-image_card_component__detailsWrapper"> <h3 class="shared-item_cards-item_name_component__root"> <a class="shared-item_cards-item_name_component__itemNameLink" tabindex="0" data-turbo="false" data-analytics-click-payload="{"eventName":"select_item","eventType":"user","ecommerce":{"currency":"USD","items":[{"affiliation":"codecanyon","itemId":831087,"itemName":"Full CSS3 Tooltip","itemBrand":"vp76","itemCategory":"css","itemCategory2":"animations-and-effects","itemCategory3":null,"price":"3.00","quantity":1}]}}" href="https://codecanyon.net/item/full-css3-tooltip/831087">Full CSS3 Tooltip</a> </h3> <div> <div class="shared-item_cards-author_category_component__root"> <i>by</i> <a href="https://codecanyon.net/user/vp76" class="shared-item_cards-author_category_component__link" rel="nofollow" data-turbo="false" > vp76 </a> in <a href="/category/css/animations-and-effects" class="shared-item_cards-author_category_component__link" > Animations And Effects </a> </div> </div> <div class="shared-item_cards-list-image_card_component__attrsWrapper"> <ul> <li class="shared-item_cards-attributes_component__attribute"> <span class="shared-item_cards-attributes_component__label">Software Version: </span> <span class="shared-item_cards-attributes_component__value">CSS 3</span> </li> </ul> <div class="shared-item_cards-included_files_component__root"> File Types Included: <ul> <li class="shared-item_cards-included_files_component__fileType">HTML</li> <li class="shared-item_cards-included_files_component__fileType">CSS</li> </ul> </div> </div> </div> <div class="shared-item_cards-list-image_card_component__priceWrapper"> <div class="shared-item_cards-list-image_card_component__info"> <div class="shared-item_cards-list-image_card_component__favAndCollections"> <a href="/my/bookmarks/new?item_id=831087" class="shared-item_cards-collection_button_component__collection" role="button" aria-label="Add to collection" title="Add to collection" rel="nofollow" data-controller="collection-button" data-action="collection-button#open" data-bookmark-button-target="bookmarkButton" data-item-id="831087" > <span class="shared-item_cards-collection_button_component__icon"> <svg width='100%' height='100%'> <use xlink:href='/storefront/assets/icon_spritesheet-2c8173174a30370958101e9b5e0dc4a0503c16573b4e2c0961245849681b052e.svg#collection'></use> </svg> </span> </a> <span class="shared-item_cards-list-image_card_component__buttonSeparator"></span> <form method="post" action="/my/favorites/831087" data-controller="favorite-button" data-action="submit->favorite-button#submit favoritesStoreUpdated@window->favorite-button#updateFromStore"> <input type="hidden" name="_method" value="post" data-favorite-button-target="formMethod"> <button type="submit" aria-label="Add to Favorites" class="shared-item_cards-favorite_button_component__favoriteButton" data-favorite-button-target="favoriteButton" data-favorited="false" data-item-id="831087"> <svg width='100%' height='100%'> <use xlink:href='/storefront/assets/icon_spritesheet-2c8173174a30370958101e9b5e0dc4a0503c16573b4e2c0961245849681b052e.svg#heart'></use> </svg> </button> </form> </div> <div class="shared-item_cards-price_component__root"> $3 </div> <div class="shared-item_cards-list-image_card_component__ratingWrapper"><div class="shared-stars_rating_component__root"> <div class="shared-stars_rating_component__starRating" role="img" aria-label="Rated 4.59 out of 5, 29 reviews" > <span class="shared-stars_rating_component__star"> <svg width='100%' height='100%'> <use xlink:href='/storefront/assets/icon_spritesheet-2c8173174a30370958101e9b5e0dc4a0503c16573b4e2c0961245849681b052e.svg#stars_4.5'></use> </svg> </span> </div> <span aria-hidden="true" class="shared-stars_rating_component__starRatingCount">(29)</span> </div> </div> <div class="shared-item_cards-sales_component__root"> 199 Sales </div> <div class="shared-item_cards-list-image_card_component__lastUpdated shared-item_cards-list-image_card_component__tinyText"> Last updated: 10 Mar 12 </div> </div> <div class="shared-item_cards-list-image_card_component__coverWrapper"> <div class="shared-item_cards-list-image_card_component__addToCartDesktop"> <a class="shared-item_cards-add_to_cart_button_component__root" role="button" title="Add to cart" aria-label="Add to cart" href="/cart/configure_before_adding/831087" rel="nofollow" data-controller="cart-button modal-commander add-to-cart-event" data-action="click->modal-commander#open cartStoreUpdated@window->cart-button#updateFromStore click->add-to-cart-event#sendEvent" data-modal-commander-url-value="/my/cart_entries?item_id=831087" data-modal-commander-method-value="POST" data-cart-button-item-id-value="831087" data-cart-button-in-cart-class="shared-item_cards-add_to_cart_button_component__inCart" data-analytics-cart-button-payload="{"eventName":"add_to_cart","eventType":"user","quantityUpdate":false,"ecommerce":{"currency":"USD","value":"3.00","items":[{"affiliation":"codecanyon","itemId":831087,"itemName":"Full CSS3 Tooltip","itemBrand":"vp76","itemCategory":"css","itemCategory2":"animations-and-effects","itemCategory3":null,"price":"3.00","quantity":1}]}}" > Add to Cart </a> </div> <div class="shared-item_cards-list-image_card_component__addToCartMobile"> <a class="shared-item_cards-add_to_cart_button_component__root shared-item_cards-add_to_cart_button_component__compact" role="button" title="Add to cart" aria-label="Add to cart" href="/cart/configure_before_adding/831087" rel="nofollow" data-controller="cart-button modal-commander add-to-cart-event" data-action="click->modal-commander#open cartStoreUpdated@window->cart-button#updateFromStore click->add-to-cart-event#sendEvent" data-modal-commander-url-value="/my/cart_entries?item_id=831087" data-modal-commander-method-value="POST" data-cart-button-item-id-value="831087" data-cart-button-in-cart-class="shared-item_cards-add_to_cart_button_component__inCart" data-analytics-cart-button-payload="{"eventName":"add_to_cart","eventType":"user","quantityUpdate":false,"ecommerce":{"currency":"USD","value":"3.00","items":[{"affiliation":"codecanyon","itemId":831087,"itemName":"Full CSS3 Tooltip","itemBrand":"vp76","itemCategory":"css","itemCategory2":"animations-and-effects","itemCategory3":null,"price":"3.00","quantity":1}]}}" > <span class="shared-item_cards-add_to_cart_button_component__cartIcon"> <svg width='100%' height='100%'> <use xlink:href='/storefront/assets/icon_spritesheet-2c8173174a30370958101e9b5e0dc4a0503c16573b4e2c0961245849681b052e.svg#cart'></use> </svg> </span> </a> </div> </div> </div> </div> </div> </div> <div class="shared-item_cards-card_component__root"> <div class="shared-item_cards-list-image_card_component__root" data-favorites-loader-target="item" data-item-id="477268" data-price="10.00" data-site="codecanyon" > <div class="shared-item_cards-list-image_card_component__contentWrapper shared-item_cards-list-image_card_component__landscapeImage"> <a class="shared-item_cards-list-image_card_component__itemLinkOverlay" href="https://codecanyon.net/item/css3-image-lightbox/477268" title="CSS3 Image Lightbox" aria-label="View CSS3 Image Lightbox" data-turbo="false" data-analytics-click-payload="{"eventName":"select_item","eventType":"user","ecommerce":{"currency":"USD","items":[{"affiliation":"codecanyon","itemId":477268,"itemName":"CSS3 Image Lightbox","itemBrand":"QuanticaLabs","itemCategory":"css","itemCategory2":"animations-and-effects","itemCategory3":null,"price":"10.00","quantity":1}]}}"></a> <div class="shared-item_cards-list-image_card_component__imageWrapper"> <div class="shared-item_cards-preview_image_component__carousel shared-item_cards-preview_image_component__singleImage" style="padding-bottom: 50.847457627118644%" > <a class="shared-item_cards-preview_image_component__imageLink" data-turbo="false" data-analytics-click-payload="{"eventName":"select_item","eventType":"user","ecommerce":{"currency":"USD","items":[{"affiliation":"codecanyon","itemId":477268,"itemName":"CSS3 Image Lightbox","itemBrand":"QuanticaLabs","itemCategory":"css","itemCategory2":"animations-and-effects","itemCategory3":null,"price":"10.00","quantity":1}]}}" href="https://codecanyon.net/item/css3-image-lightbox/477268"> <img src="https://market-resized.envatousercontent.com/previews/files/5375545/preview.jpg?w=590&h=300&cf_fit=crop&crop=top&format=auto&q=85&s=aef8954ed780e7ab35b1199e6442670543f6a2b0a12b1e68306ad7d8187ea5a1" loading="lazy" style="left: 0%" class="shared-item_cards-preview_image_component__image" alt="CSS3 Image Lightbox" title="CSS3 Image Lightbox" width="590" height="300" data-controller="image-preview" data-action="error->image-preview#setFallback" data-fallback="https://previews.customer.envatousercontent.com/files/5375545/preview.jpg" data-carousel-target="image" /> </a></div> <div class="shared-item_cards-list-image_card_component__gradient" style="padding-top: 50.847457627118644%;"> <div class="shared-item_cards-list-image_card_component__buttons"> <a href="/my/bookmarks/new?item_id=477268" class="shared-item_cards-collection_button_component__collection" role="button" aria-label="Add to collection" title="Add to collection" rel="nofollow" data-controller="collection-button" data-action="collection-button#open" data-bookmark-button-target="bookmarkButton" data-item-id="477268" > <span class="shared-item_cards-collection_button_component__icon"> <svg width='100%' height='100%'> <use xlink:href='/storefront/assets/icon_spritesheet-2c8173174a30370958101e9b5e0dc4a0503c16573b4e2c0961245849681b052e.svg#collection'></use> </svg> </span> </a> <span class="shared-item_cards-list-image_card_component__buttonSeparator"></span> <form method="post" action="/my/favorites/477268" data-controller="favorite-button" data-action="submit->favorite-button#submit favoritesStoreUpdated@window->favorite-button#updateFromStore"> <input type="hidden" name="_method" value="post" data-favorite-button-target="formMethod"> <button type="submit" aria-label="Add to Favorites" class="shared-item_cards-favorite_button_component__favoriteButton" data-favorite-button-target="favoriteButton" data-favorited="false" data-item-id="477268"> <svg width='100%' height='100%'> <use xlink:href='/storefront/assets/icon_spritesheet-2c8173174a30370958101e9b5e0dc4a0503c16573b4e2c0961245849681b052e.svg#heart'></use> </svg> </button> </form> </div> </div> </div> <div class="shared-item_cards-list-image_card_component__detailsWrapper"> <h3 class="shared-item_cards-item_name_component__root"> <a class="shared-item_cards-item_name_component__itemNameLink" tabindex="0" data-turbo="false" data-analytics-click-payload="{"eventName":"select_item","eventType":"user","ecommerce":{"currency":"USD","items":[{"affiliation":"codecanyon","itemId":477268,"itemName":"CSS3 Image Lightbox","itemBrand":"QuanticaLabs","itemCategory":"css","itemCategory2":"animations-and-effects","itemCategory3":null,"price":"10.00","quantity":1}]}}" href="https://codecanyon.net/item/css3-image-lightbox/477268">CSS3 Image Lightbox</a> </h3> <div> <div class="shared-item_cards-author_category_component__root"> <i>by</i> <a href="https://codecanyon.net/user/quanticalabs" class="shared-item_cards-author_category_component__link" rel="nofollow" data-turbo="false" > QuanticaLabs </a> in <a href="/category/css/animations-and-effects" class="shared-item_cards-author_category_component__link" > Animations And Effects </a> </div> </div> <div class="shared-item_cards-list-image_card_component__attrsWrapper"> <ul> <li class="shared-item_cards-attributes_component__attribute"> <span class="shared-item_cards-attributes_component__label">Software Version: </span> <span class="shared-item_cards-attributes_component__value">CSS 2 - 3</span> </li> </ul> <div class="shared-item_cards-included_files_component__root"> File Types Included: <ul> <li class="shared-item_cards-included_files_component__fileType">JavaScript JS</li> <li class="shared-item_cards-included_files_component__fileType">HTML</li> <li class="shared-item_cards-included_files_component__fileType">CSS</li> <li class="shared-item_cards-included_files_component__fileType">PHP</li> <li class="shared-item_cards-included_files_component__fileType">Layered PNG</li> </ul> </div> </div> </div> <div class="shared-item_cards-list-image_card_component__priceWrapper"> <div class="shared-item_cards-list-image_card_component__info"> <div class="shared-item_cards-list-image_card_component__favAndCollections"> <a href="/my/bookmarks/new?item_id=477268" class="shared-item_cards-collection_button_component__collection" role="button" aria-label="Add to collection" title="Add to collection" rel="nofollow" data-controller="collection-button" data-action="collection-button#open" data-bookmark-button-target="bookmarkButton" data-item-id="477268" > <span class="shared-item_cards-collection_button_component__icon"> <svg width='100%' height='100%'> <use xlink:href='/storefront/assets/icon_spritesheet-2c8173174a30370958101e9b5e0dc4a0503c16573b4e2c0961245849681b052e.svg#collection'></use> </svg> </span> </a> <span class="shared-item_cards-list-image_card_component__buttonSeparator"></span> <form method="post" action="/my/favorites/477268" data-controller="favorite-button" data-action="submit->favorite-button#submit favoritesStoreUpdated@window->favorite-button#updateFromStore"> <input type="hidden" name="_method" value="post" data-favorite-button-target="formMethod"> <button type="submit" aria-label="Add to Favorites" class="shared-item_cards-favorite_button_component__favoriteButton" data-favorite-button-target="favoriteButton" data-favorited="false" data-item-id="477268"> <svg width='100%' height='100%'> <use xlink:href='/storefront/assets/icon_spritesheet-2c8173174a30370958101e9b5e0dc4a0503c16573b4e2c0961245849681b052e.svg#heart'></use> </svg> </button> </form> </div> <div class="shared-item_cards-price_component__root"> $10 </div> <div class="shared-item_cards-list-image_card_component__ratingWrapper"><div class="shared-stars_rating_component__root"> <div class="shared-stars_rating_component__starRating" role="img" aria-label="Rated 2.89 out of 5, 9 reviews" > <span class="shared-stars_rating_component__star"> <svg width='100%' height='100%'> <use xlink:href='/storefront/assets/icon_spritesheet-2c8173174a30370958101e9b5e0dc4a0503c16573b4e2c0961245849681b052e.svg#stars_3.0'></use> </svg> </span> </div> <span aria-hidden="true" class="shared-stars_rating_component__starRatingCount">(9)</span> </div> </div> <div class="shared-item_cards-sales_component__root"> 118 Sales </div> <div class="shared-item_cards-list-image_card_component__lastUpdated shared-item_cards-list-image_card_component__tinyText"> Last updated: 15 Aug 11 </div> </div> <div class="shared-item_cards-list-image_card_component__coverWrapper"> <a class="shared-item_cards-add_to_cart_button_component__root shared-item_cards-add_to_cart_button_component__compact" role="button" title="Add to cart" aria-label="Add to cart" href="/cart/configure_before_adding/477268" rel="nofollow" data-controller="cart-button modal-commander add-to-cart-event" data-action="click->modal-commander#open cartStoreUpdated@window->cart-button#updateFromStore click->add-to-cart-event#sendEvent" data-modal-commander-url-value="/my/cart_entries?item_id=477268" data-modal-commander-method-value="POST" data-cart-button-item-id-value="477268" data-cart-button-in-cart-class="shared-item_cards-add_to_cart_button_component__inCart" data-analytics-cart-button-payload="{"eventName":"add_to_cart","eventType":"user","quantityUpdate":false,"ecommerce":{"currency":"USD","value":"10.00","items":[{"affiliation":"codecanyon","itemId":477268,"itemName":"CSS3 Image Lightbox","itemBrand":"QuanticaLabs","itemCategory":"css","itemCategory2":"animations-and-effects","itemCategory3":null,"price":"10.00","quantity":1}]}}" > <span class="shared-item_cards-add_to_cart_button_component__cartIcon"> <svg width='100%' height='100%'> <use xlink:href='/storefront/assets/icon_spritesheet-2c8173174a30370958101e9b5e0dc4a0503c16573b4e2c0961245849681b052e.svg#cart'></use> </svg> </span> </a> <a href="https://codecanyon.net/item/css3-image-lightbox/full_screen_preview/477268" class="shared-item_cards-preview_button_with_analytics_component__root" target="_blank" rel="noopener" > Live Preview </a> </div> </div> </div> </div> </div> <div class="shared-item_cards-card_component__root"> <div class="shared-item_cards-list-image_card_component__root" data-favorites-loader-target="item" data-item-id="7206061" data-price="7.00" data-site="codecanyon" > <div class="shared-item_cards-list-image_card_component__contentWrapper shared-item_cards-list-image_card_component__landscapeImage"> <a class="shared-item_cards-list-image_card_component__itemLinkOverlay" href="https://codecanyon.net/item/social-mosaic-wall/7206061" title="Social Mosaic Wall [ 2022 Edition ]" aria-label="View Social Mosaic Wall [ 2022 Edition ]" data-turbo="false" data-analytics-click-payload="{"eventName":"select_item","eventType":"user","ecommerce":{"currency":"USD","items":[{"affiliation":"codecanyon","itemId":7206061,"itemName":"Social Mosaic Wall [ 2022 Edition ]","itemBrand":"INVEDION","itemCategory":"css","itemCategory2":"animations-and-effects","itemCategory3":null,"price":"7.00","quantity":1}]}}"></a> <div class="shared-item_cards-list-image_card_component__imageWrapper"> <div class="shared-item_cards-preview_image_component__carousel shared-item_cards-preview_image_component__singleImage" style="padding-bottom: 50.847457627118644%" > <a class="shared-item_cards-preview_image_component__imageLink" data-turbo="false" data-analytics-click-payload="{"eventName":"select_item","eventType":"user","ecommerce":{"currency":"USD","items":[{"affiliation":"codecanyon","itemId":7206061,"itemName":"Social Mosaic Wall [ 2022 Edition ]","itemBrand":"INVEDION","itemCategory":"css","itemCategory2":"animations-and-effects","itemCategory3":null,"price":"7.00","quantity":1}]}}" href="https://codecanyon.net/item/social-mosaic-wall/7206061"> <img src="https://market-resized.envatousercontent.com/previews/files/226248413/590x300.jpg?w=590&h=300&cf_fit=crop&crop=top&format=auto&q=85&s=3ae6c49546ae3c9e154173c7e0453342cd61e1f7421fcce65bab2243f272eef2" loading="lazy" style="left: 0%" class="shared-item_cards-preview_image_component__image" alt="Social Mosaic Wall [ 2022 Edition ]" title="Social Mosaic Wall [ 2022 Edition ]" width="590" height="300" data-controller="image-preview" data-action="error->image-preview#setFallback" data-fallback="https://previews.customer.envatousercontent.com/files/226248413/590x300.jpg" data-carousel-target="image" /> </a></div> <div class="shared-item_cards-list-image_card_component__gradient" style="padding-top: 50.847457627118644%;"> <div class="shared-item_cards-list-image_card_component__buttons"> <a href="/my/bookmarks/new?item_id=7206061" class="shared-item_cards-collection_button_component__collection" role="button" aria-label="Add to collection" title="Add to collection" rel="nofollow" data-controller="collection-button" data-action="collection-button#open" data-bookmark-button-target="bookmarkButton" data-item-id="7206061" > <span class="shared-item_cards-collection_button_component__icon"> <svg width='100%' height='100%'> <use xlink:href='/storefront/assets/icon_spritesheet-2c8173174a30370958101e9b5e0dc4a0503c16573b4e2c0961245849681b052e.svg#collection'></use> </svg> </span> </a> <span class="shared-item_cards-list-image_card_component__buttonSeparator"></span> <form method="post" action="/my/favorites/7206061" data-controller="favorite-button" data-action="submit->favorite-button#submit favoritesStoreUpdated@window->favorite-button#updateFromStore"> <input type="hidden" name="_method" value="post" data-favorite-button-target="formMethod"> <button type="submit" aria-label="Add to Favorites" class="shared-item_cards-favorite_button_component__favoriteButton" data-favorite-button-target="favoriteButton" data-favorited="false" data-item-id="7206061"> <svg width='100%' height='100%'> <use xlink:href='/storefront/assets/icon_spritesheet-2c8173174a30370958101e9b5e0dc4a0503c16573b4e2c0961245849681b052e.svg#heart'></use> </svg> </button> </form> </div> </div> </div> <div class="shared-item_cards-list-image_card_component__detailsWrapper"> <h3 class="shared-item_cards-item_name_component__root"> <a class="shared-item_cards-item_name_component__itemNameLink" tabindex="0" data-turbo="false" data-analytics-click-payload="{"eventName":"select_item","eventType":"user","ecommerce":{"currency":"USD","items":[{"affiliation":"codecanyon","itemId":7206061,"itemName":"Social Mosaic Wall [ 2022 Edition ]","itemBrand":"INVEDION","itemCategory":"css","itemCategory2":"animations-and-effects","itemCategory3":null,"price":"7.00","quantity":1}]}}" href="https://codecanyon.net/item/social-mosaic-wall/7206061">Social Mosaic Wall [ 2022 Edition ]</a> </h3> <div> <div class="shared-item_cards-author_category_component__root"> <i>by</i> <a href="https://codecanyon.net/user/invedion" class="shared-item_cards-author_category_component__link" rel="nofollow" data-turbo="false" > INVEDION </a> in <a href="/category/css/animations-and-effects" class="shared-item_cards-author_category_component__link" > Animations And Effects </a> </div> </div> <div class="shared-item_cards-list-image_card_component__attrsWrapper"> <div class="shared-item_cards-included_files_component__root"> File Types Included: <ul> <li class="shared-item_cards-included_files_component__fileType">HTML</li> <li class="shared-item_cards-included_files_component__fileType">CSS</li> <li class="shared-item_cards-included_files_component__fileType">Layered PSD</li> </ul> </div> </div> </div> <div class="shared-item_cards-list-image_card_component__priceWrapper"> <div class="shared-item_cards-list-image_card_component__info"> <div class="shared-item_cards-list-image_card_component__favAndCollections"> <a href="/my/bookmarks/new?item_id=7206061" class="shared-item_cards-collection_button_component__collection" role="button" aria-label="Add to collection" title="Add to collection" rel="nofollow" data-controller="collection-button" data-action="collection-button#open" data-bookmark-button-target="bookmarkButton" data-item-id="7206061" > <span class="shared-item_cards-collection_button_component__icon"> <svg width='100%' height='100%'> <use xlink:href='/storefront/assets/icon_spritesheet-2c8173174a30370958101e9b5e0dc4a0503c16573b4e2c0961245849681b052e.svg#collection'></use> </svg> </span> </a> <span class="shared-item_cards-list-image_card_component__buttonSeparator"></span> <form method="post" action="/my/favorites/7206061" data-controller="favorite-button" data-action="submit->favorite-button#submit favoritesStoreUpdated@window->favorite-button#updateFromStore"> <input type="hidden" name="_method" value="post" data-favorite-button-target="formMethod"> <button type="submit" aria-label="Add to Favorites" class="shared-item_cards-favorite_button_component__favoriteButton" data-favorite-button-target="favoriteButton" data-favorited="false" data-item-id="7206061"> <svg width='100%' height='100%'> <use xlink:href='/storefront/assets/icon_spritesheet-2c8173174a30370958101e9b5e0dc4a0503c16573b4e2c0961245849681b052e.svg#heart'></use> </svg> </button> </form> </div> <div class="shared-item_cards-price_component__root"> $7 </div> <div class="shared-item_cards-list-image_card_component__ratingWrapper"><div class="shared-stars_rating_component__root"> <div class="shared-stars_rating_component__starRating" role="img" aria-label="Rated 5.0 out of 5, 6 reviews" > <span class="shared-stars_rating_component__star"> <svg width='100%' height='100%'> <use xlink:href='/storefront/assets/icon_spritesheet-2c8173174a30370958101e9b5e0dc4a0503c16573b4e2c0961245849681b052e.svg#stars_5.0'></use> </svg> </span> </div> <span aria-hidden="true" class="shared-stars_rating_component__starRatingCount">(6)</span> </div> </div> <div class="shared-item_cards-sales_component__root"> 111 Sales </div> <div class="shared-item_cards-list-image_card_component__lastUpdated shared-item_cards-list-image_card_component__tinyText"> Last updated: 31 Aug 22 </div> </div> <div class="shared-item_cards-list-image_card_component__coverWrapper"> <div class="shared-item_cards-list-image_card_component__addToCartDesktop"> <a class="shared-item_cards-add_to_cart_button_component__root" role="button" title="Add to cart" aria-label="Add to cart" href="/cart/configure_before_adding/7206061" rel="nofollow" data-controller="cart-button modal-commander add-to-cart-event" data-action="click->modal-commander#open cartStoreUpdated@window->cart-button#updateFromStore click->add-to-cart-event#sendEvent" data-modal-commander-url-value="/my/cart_entries?item_id=7206061" data-modal-commander-method-value="POST" data-cart-button-item-id-value="7206061" data-cart-button-in-cart-class="shared-item_cards-add_to_cart_button_component__inCart" data-analytics-cart-button-payload="{"eventName":"add_to_cart","eventType":"user","quantityUpdate":false,"ecommerce":{"currency":"USD","value":"7.00","items":[{"affiliation":"codecanyon","itemId":7206061,"itemName":"Social Mosaic Wall [ 2022 Edition ]","itemBrand":"INVEDION","itemCategory":"css","itemCategory2":"animations-and-effects","itemCategory3":null,"price":"7.00","quantity":1}]}}" > Add to Cart </a> </div> <div class="shared-item_cards-list-image_card_component__addToCartMobile"> <a class="shared-item_cards-add_to_cart_button_component__root shared-item_cards-add_to_cart_button_component__compact" role="button" title="Add to cart" aria-label="Add to cart" href="/cart/configure_before_adding/7206061" rel="nofollow" data-controller="cart-button modal-commander add-to-cart-event" data-action="click->modal-commander#open cartStoreUpdated@window->cart-button#updateFromStore click->add-to-cart-event#sendEvent" data-modal-commander-url-value="/my/cart_entries?item_id=7206061" data-modal-commander-method-value="POST" data-cart-button-item-id-value="7206061" data-cart-button-in-cart-class="shared-item_cards-add_to_cart_button_component__inCart" data-analytics-cart-button-payload="{"eventName":"add_to_cart","eventType":"user","quantityUpdate":false,"ecommerce":{"currency":"USD","value":"7.00","items":[{"affiliation":"codecanyon","itemId":7206061,"itemName":"Social Mosaic Wall [ 2022 Edition ]","itemBrand":"INVEDION","itemCategory":"css","itemCategory2":"animations-and-effects","itemCategory3":null,"price":"7.00","quantity":1}]}}" > <span class="shared-item_cards-add_to_cart_button_component__cartIcon"> <svg width='100%' height='100%'> <use xlink:href='/storefront/assets/icon_spritesheet-2c8173174a30370958101e9b5e0dc4a0503c16573b4e2c0961245849681b052e.svg#cart'></use> </svg> </span> </a> </div> </div> </div> </div> </div> </div> <div class="shared-item_cards-card_component__root"> <div class="shared-item_cards-list-image_card_component__root" data-favorites-loader-target="item" data-item-id="4119780" data-price="4.00" data-site="codecanyon" > <div class="shared-item_cards-list-image_card_component__contentWrapper shared-item_cards-list-image_card_component__landscapeImage"> <a class="shared-item_cards-list-image_card_component__itemLinkOverlay" href="https://codecanyon.net/item/css3-banner-rotator/4119780" title="CSS3 Banner Rotator" aria-label="View CSS3 Banner Rotator" data-turbo="false" data-analytics-click-payload="{"eventName":"select_item","eventType":"user","ecommerce":{"currency":"USD","items":[{"affiliation":"codecanyon","itemId":4119780,"itemName":"CSS3 Banner Rotator","itemBrand":"zcubetechnology","itemCategory":"css","itemCategory2":"animations-and-effects","itemCategory3":null,"price":"4.00","quantity":1}]}}"></a> <div class="shared-item_cards-list-image_card_component__imageWrapper"> <div class="shared-item_cards-preview_image_component__carousel shared-item_cards-preview_image_component__singleImage" style="padding-bottom: 50.847457627118644%" > <a class="shared-item_cards-preview_image_component__imageLink" data-turbo="false" data-analytics-click-payload="{"eventName":"select_item","eventType":"user","ecommerce":{"currency":"USD","items":[{"affiliation":"codecanyon","itemId":4119780,"itemName":"CSS3 Banner Rotator","itemBrand":"zcubetechnology","itemCategory":"css","itemCategory2":"animations-and-effects","itemCategory3":null,"price":"4.00","quantity":1}]}}" href="https://codecanyon.net/item/css3-banner-rotator/4119780"> <img src="https://market-resized.envatousercontent.com/previews/files/49210474/Inline-Preview-Image.jpg?w=590&h=300&cf_fit=crop&crop=top&format=auto&q=85&s=c82e9fb6e62df653a0ec38f129e0f560bc3eb93dd7ebc7b71f04090ddc2e80f3" loading="lazy" style="left: 0%" class="shared-item_cards-preview_image_component__image" alt="CSS3 Banner Rotator" title="CSS3 Banner Rotator" width="590" height="300" data-controller="image-preview" data-action="error->image-preview#setFallback" data-fallback="https://previews.customer.envatousercontent.com/files/49210474/Inline-Preview-Image.jpg" data-carousel-target="image" /> </a></div> <div class="shared-item_cards-list-image_card_component__gradient" style="padding-top: 50.847457627118644%;"> <div class="shared-item_cards-list-image_card_component__buttons"> <a href="/my/bookmarks/new?item_id=4119780" class="shared-item_cards-collection_button_component__collection" role="button" aria-label="Add to collection" title="Add to collection" rel="nofollow" data-controller="collection-button" data-action="collection-button#open" data-bookmark-button-target="bookmarkButton" data-item-id="4119780" > <span class="shared-item_cards-collection_button_component__icon"> <svg width='100%' height='100%'> <use xlink:href='/storefront/assets/icon_spritesheet-2c8173174a30370958101e9b5e0dc4a0503c16573b4e2c0961245849681b052e.svg#collection'></use> </svg> </span> </a> <span class="shared-item_cards-list-image_card_component__buttonSeparator"></span> <form method="post" action="/my/favorites/4119780" data-controller="favorite-button" data-action="submit->favorite-button#submit favoritesStoreUpdated@window->favorite-button#updateFromStore"> <input type="hidden" name="_method" value="post" data-favorite-button-target="formMethod"> <button type="submit" aria-label="Add to Favorites" class="shared-item_cards-favorite_button_component__favoriteButton" data-favorite-button-target="favoriteButton" data-favorited="false" data-item-id="4119780"> <svg width='100%' height='100%'> <use xlink:href='/storefront/assets/icon_spritesheet-2c8173174a30370958101e9b5e0dc4a0503c16573b4e2c0961245849681b052e.svg#heart'></use> </svg> </button> </form> </div> </div> </div> <div class="shared-item_cards-list-image_card_component__detailsWrapper"> <h3 class="shared-item_cards-item_name_component__root"> <a class="shared-item_cards-item_name_component__itemNameLink" tabindex="0" data-turbo="false" data-analytics-click-payload="{"eventName":"select_item","eventType":"user","ecommerce":{"currency":"USD","items":[{"affiliation":"codecanyon","itemId":4119780,"itemName":"CSS3 Banner Rotator","itemBrand":"zcubetechnology","itemCategory":"css","itemCategory2":"animations-and-effects","itemCategory3":null,"price":"4.00","quantity":1}]}}" href="https://codecanyon.net/item/css3-banner-rotator/4119780">CSS3 Banner Rotator</a> </h3> <div> <div class="shared-item_cards-author_category_component__root"> <i>by</i> <a href="https://codecanyon.net/user/zcubetechnology" class="shared-item_cards-author_category_component__link" rel="nofollow" data-turbo="false" > zcubetechnology </a> in <a href="/category/css/animations-and-effects" class="shared-item_cards-author_category_component__link" > Animations And Effects </a> </div> </div> <div class="shared-item_cards-list-image_card_component__attrsWrapper"> <ul> <li class="shared-item_cards-attributes_component__attribute"> <span class="shared-item_cards-attributes_component__label">Software Version: </span> <span class="shared-item_cards-attributes_component__value">CSS 2 - 3</span> </li> </ul> <div class="shared-item_cards-included_files_component__root"> File Types Included: <ul> <li class="shared-item_cards-included_files_component__fileType">HTML</li> <li class="shared-item_cards-included_files_component__fileType">CSS</li> </ul> </div> </div> </div> <div class="shared-item_cards-list-image_card_component__priceWrapper"> <div class="shared-item_cards-list-image_card_component__info"> <div class="shared-item_cards-list-image_card_component__favAndCollections"> <a href="/my/bookmarks/new?item_id=4119780" class="shared-item_cards-collection_button_component__collection" role="button" aria-label="Add to collection" title="Add to collection" rel="nofollow" data-controller="collection-button" data-action="collection-button#open" data-bookmark-button-target="bookmarkButton" data-item-id="4119780" > <span class="shared-item_cards-collection_button_component__icon"> <svg width='100%' height='100%'> <use xlink:href='/storefront/assets/icon_spritesheet-2c8173174a30370958101e9b5e0dc4a0503c16573b4e2c0961245849681b052e.svg#collection'></use> </svg> </span> </a> <span class="shared-item_cards-list-image_card_component__buttonSeparator"></span> <form method="post" action="/my/favorites/4119780" data-controller="favorite-button" data-action="submit->favorite-button#submit favoritesStoreUpdated@window->favorite-button#updateFromStore"> <input type="hidden" name="_method" value="post" data-favorite-button-target="formMethod"> <button type="submit" aria-label="Add to Favorites" class="shared-item_cards-favorite_button_component__favoriteButton" data-favorite-button-target="favoriteButton" data-favorited="false" data-item-id="4119780"> <svg width='100%' height='100%'> <use xlink:href='/storefront/assets/icon_spritesheet-2c8173174a30370958101e9b5e0dc4a0503c16573b4e2c0961245849681b052e.svg#heart'></use> </svg> </button> </form> </div> <div class="shared-item_cards-price_component__root"> $4 </div> <div class="shared-item_cards-list-image_card_component__ratingWrapper"><div class="shared-stars_rating_component__root"> <div class="shared-stars_rating_component__starRating" role="img" aria-label="Rated 3.8 out of 5, 10 reviews" > <span class="shared-stars_rating_component__star"> <svg width='100%' height='100%'> <use xlink:href='/storefront/assets/icon_spritesheet-2c8173174a30370958101e9b5e0dc4a0503c16573b4e2c0961245849681b052e.svg#stars_4.0'></use> </svg> </span> </div> <span aria-hidden="true" class="shared-stars_rating_component__starRatingCount">(10)</span> </div> </div> <div class="shared-item_cards-sales_component__root"> 111 Sales </div> <div class="shared-item_cards-list-image_card_component__lastUpdated shared-item_cards-list-image_card_component__tinyText"> Last updated: 25 Feb 13 </div> </div> <div class="shared-item_cards-list-image_card_component__coverWrapper"> <a class="shared-item_cards-add_to_cart_button_component__root shared-item_cards-add_to_cart_button_component__compact" role="button" title="Add to cart" aria-label="Add to cart" href="/cart/configure_before_adding/4119780" rel="nofollow" data-controller="cart-button modal-commander add-to-cart-event" data-action="click->modal-commander#open cartStoreUpdated@window->cart-button#updateFromStore click->add-to-cart-event#sendEvent" data-modal-commander-url-value="/my/cart_entries?item_id=4119780" data-modal-commander-method-value="POST" data-cart-button-item-id-value="4119780" data-cart-button-in-cart-class="shared-item_cards-add_to_cart_button_component__inCart" data-analytics-cart-button-payload="{"eventName":"add_to_cart","eventType":"user","quantityUpdate":false,"ecommerce":{"currency":"USD","value":"4.00","items":[{"affiliation":"codecanyon","itemId":4119780,"itemName":"CSS3 Banner Rotator","itemBrand":"zcubetechnology","itemCategory":"css","itemCategory2":"animations-and-effects","itemCategory3":null,"price":"4.00","quantity":1}]}}" > <span class="shared-item_cards-add_to_cart_button_component__cartIcon"> <svg width='100%' height='100%'> <use xlink:href='/storefront/assets/icon_spritesheet-2c8173174a30370958101e9b5e0dc4a0503c16573b4e2c0961245849681b052e.svg#cart'></use> </svg> </span> </a> <a href="https://codecanyon.net/item/css3-banner-rotator/full_screen_preview/4119780" class="shared-item_cards-preview_button_with_analytics_component__root" target="_blank" rel="noopener" > Live Preview </a> </div> </div> </div> </div> </div> <div class="shared-item_cards-card_component__root"> <div class="shared-item_cards-list-image_card_component__root" data-favorites-loader-target="item" data-item-id="8370121" data-price="3.00" data-site="codecanyon" > <div class="shared-item_cards-list-image_card_component__contentWrapper shared-item_cards-list-image_card_component__landscapeImage"> <a class="shared-item_cards-list-image_card_component__itemLinkOverlay" href="https://codecanyon.net/item/tfigure-image-captions/8370121" title="tFigure - Image Captions" aria-label="View tFigure - Image Captions" data-turbo="false" data-analytics-click-payload="{"eventName":"select_item","eventType":"user","ecommerce":{"currency":"USD","items":[{"affiliation":"codecanyon","itemId":8370121,"itemName":"tFigure - Image Captions","itemBrand":"mmetrodw","itemCategory":"css","itemCategory2":"animations-and-effects","itemCategory3":null,"price":"3.00","quantity":1}]}}"></a> <div class="shared-item_cards-list-image_card_component__imageWrapper"> <div class="shared-item_cards-preview_image_component__carousel shared-item_cards-preview_image_component__singleImage" style="padding-bottom: 50.847457627118644%" > <a class="shared-item_cards-preview_image_component__imageLink" data-turbo="false" data-analytics-click-payload="{"eventName":"select_item","eventType":"user","ecommerce":{"currency":"USD","items":[{"affiliation":"codecanyon","itemId":8370121,"itemName":"tFigure - Image Captions","itemBrand":"mmetrodw","itemCategory":"css","itemCategory2":"animations-and-effects","itemCategory3":null,"price":"3.00","quantity":1}]}}" href="https://codecanyon.net/item/tfigure-image-captions/8370121"> <img src="https://market-resized.envatousercontent.com/previews/files/98744184/prev.png?w=590&h=300&cf_fit=crop&crop=top&format=auto&q=85&s=000158f84609d4bab0c842031b29ebfee4890787c19b1afe0d288a5208df679b" loading="lazy" style="left: 0%" class="shared-item_cards-preview_image_component__image" alt="tFigure - Image Captions" title="tFigure - Image Captions" width="590" height="300" data-controller="image-preview" data-action="error->image-preview#setFallback" data-fallback="https://previews.customer.envatousercontent.com/files/98744184/prev.png" data-carousel-target="image" /> </a></div> <div class="shared-item_cards-list-image_card_component__gradient" style="padding-top: 50.847457627118644%;"> <div class="shared-item_cards-list-image_card_component__buttons"> <a href="/my/bookmarks/new?item_id=8370121" class="shared-item_cards-collection_button_component__collection" role="button" aria-label="Add to collection" title="Add to collection" rel="nofollow" data-controller="collection-button" data-action="collection-button#open" data-bookmark-button-target="bookmarkButton" data-item-id="8370121" > <span class="shared-item_cards-collection_button_component__icon"> <svg width='100%' height='100%'> <use xlink:href='/storefront/assets/icon_spritesheet-2c8173174a30370958101e9b5e0dc4a0503c16573b4e2c0961245849681b052e.svg#collection'></use> </svg> </span> </a> <span class="shared-item_cards-list-image_card_component__buttonSeparator"></span> <form method="post" action="/my/favorites/8370121" data-controller="favorite-button" data-action="submit->favorite-button#submit favoritesStoreUpdated@window->favorite-button#updateFromStore"> <input type="hidden" name="_method" value="post" data-favorite-button-target="formMethod"> <button type="submit" aria-label="Add to Favorites" class="shared-item_cards-favorite_button_component__favoriteButton" data-favorite-button-target="favoriteButton" data-favorited="false" data-item-id="8370121"> <svg width='100%' height='100%'> <use xlink:href='/storefront/assets/icon_spritesheet-2c8173174a30370958101e9b5e0dc4a0503c16573b4e2c0961245849681b052e.svg#heart'></use> </svg> </button> </form> </div> </div> </div> <div class="shared-item_cards-list-image_card_component__detailsWrapper"> <h3 class="shared-item_cards-item_name_component__root"> <a class="shared-item_cards-item_name_component__itemNameLink" tabindex="0" data-turbo="false" data-analytics-click-payload="{"eventName":"select_item","eventType":"user","ecommerce":{"currency":"USD","items":[{"affiliation":"codecanyon","itemId":8370121,"itemName":"tFigure - Image Captions","itemBrand":"mmetrodw","itemCategory":"css","itemCategory2":"animations-and-effects","itemCategory3":null,"price":"3.00","quantity":1}]}}" href="https://codecanyon.net/item/tfigure-image-captions/8370121">tFigure - Image Captions</a> </h3> <div> <div class="shared-item_cards-author_category_component__root"> <i>by</i> <a href="https://codecanyon.net/user/mmetrodw" class="shared-item_cards-author_category_component__link" rel="nofollow" data-turbo="false" > mmetrodw </a> in <a href="/category/css/animations-and-effects" class="shared-item_cards-author_category_component__link" > Animations And Effects </a> </div> </div> <div class="shared-item_cards-list-image_card_component__attrsWrapper"> <ul> <li class="shared-item_cards-attributes_component__attribute"> <span class="shared-item_cards-attributes_component__label">Software Version: </span> <span class="shared-item_cards-attributes_component__value">CSS 2 - 3</span> </li> </ul> <div class="shared-item_cards-included_files_component__root"> File Types Included: <ul> <li class="shared-item_cards-included_files_component__fileType">HTML</li> <li class="shared-item_cards-included_files_component__fileType">CSS</li> </ul> </div> </div> </div> <div class="shared-item_cards-list-image_card_component__priceWrapper"> <div class="shared-item_cards-list-image_card_component__info"> <div class="shared-item_cards-list-image_card_component__favAndCollections"> <a href="/my/bookmarks/new?item_id=8370121" class="shared-item_cards-collection_button_component__collection" role="button" aria-label="Add to collection" title="Add to collection" rel="nofollow" data-controller="collection-button" data-action="collection-button#open" data-bookmark-button-target="bookmarkButton" data-item-id="8370121" > <span class="shared-item_cards-collection_button_component__icon"> <svg width='100%' height='100%'> <use xlink:href='/storefront/assets/icon_spritesheet-2c8173174a30370958101e9b5e0dc4a0503c16573b4e2c0961245849681b052e.svg#collection'></use> </svg> </span> </a> <span class="shared-item_cards-list-image_card_component__buttonSeparator"></span> <form method="post" action="/my/favorites/8370121" data-controller="favorite-button" data-action="submit->favorite-button#submit favoritesStoreUpdated@window->favorite-button#updateFromStore"> <input type="hidden" name="_method" value="post" data-favorite-button-target="formMethod"> <button type="submit" aria-label="Add to Favorites" class="shared-item_cards-favorite_button_component__favoriteButton" data-favorite-button-target="favoriteButton" data-favorited="false" data-item-id="8370121"> <svg width='100%' height='100%'> <use xlink:href='/storefront/assets/icon_spritesheet-2c8173174a30370958101e9b5e0dc4a0503c16573b4e2c0961245849681b052e.svg#heart'></use> </svg> </button> </form> </div> <div class="shared-item_cards-price_component__root"> $3 </div> <div class="shared-item_cards-list-image_card_component__ratingWrapper"><div class="shared-stars_rating_component__root"> <div class="shared-stars_rating_component__starRating" role="img" aria-label="Rated 4.5 out of 5, 8 reviews" > <span class="shared-stars_rating_component__star"> <svg width='100%' height='100%'> <use xlink:href='/storefront/assets/icon_spritesheet-2c8173174a30370958101e9b5e0dc4a0503c16573b4e2c0961245849681b052e.svg#stars_4.5'></use> </svg> </span> </div> <span aria-hidden="true" class="shared-stars_rating_component__starRatingCount">(8)</span> </div> </div> <div class="shared-item_cards-sales_component__root"> 103 Sales </div> <div class="shared-item_cards-list-image_card_component__lastUpdated shared-item_cards-list-image_card_component__tinyText"> Last updated: 26 Jul 14 </div> </div> <div class="shared-item_cards-list-image_card_component__coverWrapper"> <a class="shared-item_cards-add_to_cart_button_component__root shared-item_cards-add_to_cart_button_component__compact" role="button" title="Add to cart" aria-label="Add to cart" href="/cart/configure_before_adding/8370121" rel="nofollow" data-controller="cart-button modal-commander add-to-cart-event" data-action="click->modal-commander#open cartStoreUpdated@window->cart-button#updateFromStore click->add-to-cart-event#sendEvent" data-modal-commander-url-value="/my/cart_entries?item_id=8370121" data-modal-commander-method-value="POST" data-cart-button-item-id-value="8370121" data-cart-button-in-cart-class="shared-item_cards-add_to_cart_button_component__inCart" data-analytics-cart-button-payload="{"eventName":"add_to_cart","eventType":"user","quantityUpdate":false,"ecommerce":{"currency":"USD","value":"3.00","items":[{"affiliation":"codecanyon","itemId":8370121,"itemName":"tFigure - Image Captions","itemBrand":"mmetrodw","itemCategory":"css","itemCategory2":"animations-and-effects","itemCategory3":null,"price":"3.00","quantity":1}]}}" > <span class="shared-item_cards-add_to_cart_button_component__cartIcon"> <svg width='100%' height='100%'> <use xlink:href='/storefront/assets/icon_spritesheet-2c8173174a30370958101e9b5e0dc4a0503c16573b4e2c0961245849681b052e.svg#cart'></use> </svg> </span> </a> <a href="https://codecanyon.net/item/tfigure-image-captions/full_screen_preview/8370121" class="shared-item_cards-preview_button_with_analytics_component__root" target="_blank" rel="noopener" > Live Preview </a> </div> </div> </div> </div> </div> <div class="shared-item_cards-card_component__root"> <div class="shared-item_cards-list-image_card_component__root" data-favorites-loader-target="item" data-item-id="3895607" data-price="4.00" data-site="codecanyon" > <div class="shared-item_cards-list-image_card_component__contentWrapper shared-item_cards-list-image_card_component__landscapeImage"> <a class="shared-item_cards-list-image_card_component__itemLinkOverlay" href="https://codecanyon.net/item/pure-css3-image-accordion/3895607" title="Pure CSS3 Image Accordion" aria-label="View Pure CSS3 Image Accordion" data-turbo="false" data-analytics-click-payload="{"eventName":"select_item","eventType":"user","ecommerce":{"currency":"USD","items":[{"affiliation":"codecanyon","itemId":3895607,"itemName":"Pure CSS3 Image Accordion","itemBrand":"voky","itemCategory":"css","itemCategory2":"animations-and-effects","itemCategory3":null,"price":"4.00","quantity":1}]}}"></a> <div class="shared-item_cards-list-image_card_component__imageWrapper"> <div class="shared-item_cards-preview_image_component__carousel shared-item_cards-preview_image_component__singleImage" style="padding-bottom: 50.847457627118644%" > <a class="shared-item_cards-preview_image_component__imageLink" data-turbo="false" data-analytics-click-payload="{"eventName":"select_item","eventType":"user","ecommerce":{"currency":"USD","items":[{"affiliation":"codecanyon","itemId":3895607,"itemName":"Pure CSS3 Image Accordion","itemBrand":"voky","itemCategory":"css","itemCategory2":"animations-and-effects","itemCategory3":null,"price":"4.00","quantity":1}]}}" href="https://codecanyon.net/item/pure-css3-image-accordion/3895607"> <img src="https://market-resized.envatousercontent.com/previews/files/46708056/preview.png?w=590&h=300&cf_fit=crop&crop=top&format=auto&q=85&s=8568f37d04fe63df54b30aac64b0553f376c971eaff75b797451e387e5c613e8" loading="lazy" style="left: 0%" class="shared-item_cards-preview_image_component__image" alt="Pure CSS3 Image Accordion" title="Pure CSS3 Image Accordion" width="590" height="300" data-controller="image-preview" data-action="error->image-preview#setFallback" data-fallback="https://previews.customer.envatousercontent.com/files/46708056/preview.png" data-carousel-target="image" /> </a></div> <div class="shared-item_cards-list-image_card_component__gradient" style="padding-top: 50.847457627118644%;"> <div class="shared-item_cards-list-image_card_component__buttons"> <a href="/my/bookmarks/new?item_id=3895607" class="shared-item_cards-collection_button_component__collection" role="button" aria-label="Add to collection" title="Add to collection" rel="nofollow" data-controller="collection-button" data-action="collection-button#open" data-bookmark-button-target="bookmarkButton" data-item-id="3895607" > <span class="shared-item_cards-collection_button_component__icon"> <svg width='100%' height='100%'> <use xlink:href='/storefront/assets/icon_spritesheet-2c8173174a30370958101e9b5e0dc4a0503c16573b4e2c0961245849681b052e.svg#collection'></use> </svg> </span> </a> <span class="shared-item_cards-list-image_card_component__buttonSeparator"></span> <form method="post" action="/my/favorites/3895607" data-controller="favorite-button" data-action="submit->favorite-button#submit favoritesStoreUpdated@window->favorite-button#updateFromStore"> <input type="hidden" name="_method" value="post" data-favorite-button-target="formMethod"> <button type="submit" aria-label="Add to Favorites" class="shared-item_cards-favorite_button_component__favoriteButton" data-favorite-button-target="favoriteButton" data-favorited="false" data-item-id="3895607"> <svg width='100%' height='100%'> <use xlink:href='/storefront/assets/icon_spritesheet-2c8173174a30370958101e9b5e0dc4a0503c16573b4e2c0961245849681b052e.svg#heart'></use> </svg> </button> </form> </div> </div> </div> <div class="shared-item_cards-list-image_card_component__detailsWrapper"> <h3 class="shared-item_cards-item_name_component__root"> <a class="shared-item_cards-item_name_component__itemNameLink" tabindex="0" data-turbo="false" data-analytics-click-payload="{"eventName":"select_item","eventType":"user","ecommerce":{"currency":"USD","items":[{"affiliation":"codecanyon","itemId":3895607,"itemName":"Pure CSS3 Image Accordion","itemBrand":"voky","itemCategory":"css","itemCategory2":"animations-and-effects","itemCategory3":null,"price":"4.00","quantity":1}]}}" href="https://codecanyon.net/item/pure-css3-image-accordion/3895607">Pure CSS3 Image Accordion</a> </h3> <div> <div class="shared-item_cards-author_category_component__root"> <i>by</i> <a href="https://codecanyon.net/user/voky" class="shared-item_cards-author_category_component__link" rel="nofollow" data-turbo="false" > voky </a> in <a href="/category/css/animations-and-effects" class="shared-item_cards-author_category_component__link" > Animations And Effects </a> </div> </div> <div class="shared-item_cards-list-image_card_component__attrsWrapper"> <ul> <li class="shared-item_cards-attributes_component__attribute"> <span class="shared-item_cards-attributes_component__label">Software Version: </span> <span class="shared-item_cards-attributes_component__value">CSS 3</span> </li> </ul> <div class="shared-item_cards-included_files_component__root"> File Types Included: <ul> <li class="shared-item_cards-included_files_component__fileType">HTML</li> <li class="shared-item_cards-included_files_component__fileType">CSS</li> </ul> </div> </div> </div> <div class="shared-item_cards-list-image_card_component__priceWrapper"> <div class="shared-item_cards-list-image_card_component__info"> <div class="shared-item_cards-list-image_card_component__favAndCollections"> <a href="/my/bookmarks/new?item_id=3895607" class="shared-item_cards-collection_button_component__collection" role="button" aria-label="Add to collection" title="Add to collection" rel="nofollow" data-controller="collection-button" data-action="collection-button#open" data-bookmark-button-target="bookmarkButton" data-item-id="3895607" > <span class="shared-item_cards-collection_button_component__icon"> <svg width='100%' height='100%'> <use xlink:href='/storefront/assets/icon_spritesheet-2c8173174a30370958101e9b5e0dc4a0503c16573b4e2c0961245849681b052e.svg#collection'></use> </svg> </span> </a> <span class="shared-item_cards-list-image_card_component__buttonSeparator"></span> <form method="post" action="/my/favorites/3895607" data-controller="favorite-button" data-action="submit->favorite-button#submit favoritesStoreUpdated@window->favorite-button#updateFromStore"> <input type="hidden" name="_method" value="post" data-favorite-button-target="formMethod"> <button type="submit" aria-label="Add to Favorites" class="shared-item_cards-favorite_button_component__favoriteButton" data-favorite-button-target="favoriteButton" data-favorited="false" data-item-id="3895607"> <svg width='100%' height='100%'> <use xlink:href='/storefront/assets/icon_spritesheet-2c8173174a30370958101e9b5e0dc4a0503c16573b4e2c0961245849681b052e.svg#heart'></use> </svg> </button> </form> </div> <div class="shared-item_cards-price_component__root"> $4 </div> <div class="shared-item_cards-list-image_card_component__ratingWrapper"><div class="shared-stars_rating_component__root"> <div class="shared-stars_rating_component__starRating" role="img" aria-label="Rated 4.6 out of 5, 10 reviews" > <span class="shared-stars_rating_component__star"> <svg width='100%' height='100%'> <use xlink:href='/storefront/assets/icon_spritesheet-2c8173174a30370958101e9b5e0dc4a0503c16573b4e2c0961245849681b052e.svg#stars_4.5'></use> </svg> </span> </div> <span aria-hidden="true" class="shared-stars_rating_component__starRatingCount">(10)</span> </div> </div> <div class="shared-item_cards-sales_component__root"> 101 Sales </div> <div class="shared-item_cards-list-image_card_component__lastUpdated shared-item_cards-list-image_card_component__tinyText"> Last updated: 27 Jan 13 </div> </div> <div class="shared-item_cards-list-image_card_component__coverWrapper"> <a class="shared-item_cards-add_to_cart_button_component__root shared-item_cards-add_to_cart_button_component__compact" role="button" title="Add to cart" aria-label="Add to cart" href="/cart/configure_before_adding/3895607" rel="nofollow" data-controller="cart-button modal-commander add-to-cart-event" data-action="click->modal-commander#open cartStoreUpdated@window->cart-button#updateFromStore click->add-to-cart-event#sendEvent" data-modal-commander-url-value="/my/cart_entries?item_id=3895607" data-modal-commander-method-value="POST" data-cart-button-item-id-value="3895607" data-cart-button-in-cart-class="shared-item_cards-add_to_cart_button_component__inCart" data-analytics-cart-button-payload="{"eventName":"add_to_cart","eventType":"user","quantityUpdate":false,"ecommerce":{"currency":"USD","value":"4.00","items":[{"affiliation":"codecanyon","itemId":3895607,"itemName":"Pure CSS3 Image Accordion","itemBrand":"voky","itemCategory":"css","itemCategory2":"animations-and-effects","itemCategory3":null,"price":"4.00","quantity":1}]}}" > <span class="shared-item_cards-add_to_cart_button_component__cartIcon"> <svg width='100%' height='100%'> <use xlink:href='/storefront/assets/icon_spritesheet-2c8173174a30370958101e9b5e0dc4a0503c16573b4e2c0961245849681b052e.svg#cart'></use> </svg> </span> </a> <a href="https://codecanyon.net/item/pure-css3-image-accordion/full_screen_preview/3895607" class="shared-item_cards-preview_button_with_analytics_component__root" target="_blank" rel="noopener" > Live Preview </a> </div> </div> </div> </div> </div> <div class="shared-item_cards-card_component__root"> <div class="shared-item_cards-list-image_card_component__root" data-favorites-loader-target="item" data-item-id="2253518" data-price="5.00" data-site="codecanyon" > <div class="shared-item_cards-list-image_card_component__contentWrapper shared-item_cards-list-image_card_component__landscapeImage"> <a class="shared-item_cards-list-image_card_component__itemLinkOverlay" href="https://codecanyon.net/item/css3-hover-pack/2253518" title="CSS3 Hover Pack" aria-label="View CSS3 Hover Pack" data-turbo="false" data-analytics-click-payload="{"eventName":"select_item","eventType":"user","ecommerce":{"currency":"USD","items":[{"affiliation":"codecanyon","itemId":2253518,"itemName":"CSS3 Hover Pack","itemBrand":"pauloreg","itemCategory":"css","itemCategory2":"animations-and-effects","itemCategory3":null,"price":"5.00","quantity":1}]}}"></a> <div class="shared-item_cards-list-image_card_component__imageWrapper"> <div class="shared-item_cards-preview_image_component__carousel shared-item_cards-preview_image_component__singleImage" style="padding-bottom: 50.847457627118644%" > <a class="shared-item_cards-preview_image_component__imageLink" data-turbo="false" data-analytics-click-payload="{"eventName":"select_item","eventType":"user","ecommerce":{"currency":"USD","items":[{"affiliation":"codecanyon","itemId":2253518,"itemName":"CSS3 Hover Pack","itemBrand":"pauloreg","itemCategory":"css","itemCategory2":"animations-and-effects","itemCategory3":null,"price":"5.00","quantity":1}]}}" href="https://codecanyon.net/item/css3-hover-pack/2253518"> <img src="https://market-resized.envatousercontent.com/previews/files/26042067/preview.jpg?w=590&h=300&cf_fit=crop&crop=top&format=auto&q=85&s=ababc4455b37e01e7f7ac96f416508e46edd575b82c6a93b3f7c7640a634047a" loading="lazy" style="left: 0%" class="shared-item_cards-preview_image_component__image" alt="CSS3 Hover Pack" title="CSS3 Hover Pack" width="590" height="300" data-controller="image-preview" data-action="error->image-preview#setFallback" data-fallback="https://previews.customer.envatousercontent.com/files/26042067/preview.jpg" data-carousel-target="image" /> </a></div> <div class="shared-item_cards-list-image_card_component__gradient" style="padding-top: 50.847457627118644%;"> <div class="shared-item_cards-list-image_card_component__buttons"> <a href="/my/bookmarks/new?item_id=2253518" class="shared-item_cards-collection_button_component__collection" role="button" aria-label="Add to collection" title="Add to collection" rel="nofollow" data-controller="collection-button" data-action="collection-button#open" data-bookmark-button-target="bookmarkButton" data-item-id="2253518" > <span class="shared-item_cards-collection_button_component__icon"> <svg width='100%' height='100%'> <use xlink:href='/storefront/assets/icon_spritesheet-2c8173174a30370958101e9b5e0dc4a0503c16573b4e2c0961245849681b052e.svg#collection'></use> </svg> </span> </a> <span class="shared-item_cards-list-image_card_component__buttonSeparator"></span> <form method="post" action="/my/favorites/2253518" data-controller="favorite-button" data-action="submit->favorite-button#submit favoritesStoreUpdated@window->favorite-button#updateFromStore"> <input type="hidden" name="_method" value="post" data-favorite-button-target="formMethod"> <button type="submit" aria-label="Add to Favorites" class="shared-item_cards-favorite_button_component__favoriteButton" data-favorite-button-target="favoriteButton" data-favorited="false" data-item-id="2253518"> <svg width='100%' height='100%'> <use xlink:href='/storefront/assets/icon_spritesheet-2c8173174a30370958101e9b5e0dc4a0503c16573b4e2c0961245849681b052e.svg#heart'></use> </svg> </button> </form> </div> </div> </div> <div class="shared-item_cards-list-image_card_component__detailsWrapper"> <h3 class="shared-item_cards-item_name_component__root"> <a class="shared-item_cards-item_name_component__itemNameLink" tabindex="0" data-turbo="false" data-analytics-click-payload="{"eventName":"select_item","eventType":"user","ecommerce":{"currency":"USD","items":[{"affiliation":"codecanyon","itemId":2253518,"itemName":"CSS3 Hover Pack","itemBrand":"pauloreg","itemCategory":"css","itemCategory2":"animations-and-effects","itemCategory3":null,"price":"5.00","quantity":1}]}}" href="https://codecanyon.net/item/css3-hover-pack/2253518">CSS3 Hover Pack</a> </h3> <div> <div class="shared-item_cards-author_category_component__root"> <i>by</i> <a href="https://codecanyon.net/user/pauloreg" class="shared-item_cards-author_category_component__link" rel="nofollow" data-turbo="false" > pauloreg </a> in <a href="/category/css/animations-and-effects" class="shared-item_cards-author_category_component__link" > Animations And Effects </a> </div> </div> <div class="shared-item_cards-list-image_card_component__attrsWrapper"> <ul> <li class="shared-item_cards-attributes_component__attribute"> <span class="shared-item_cards-attributes_component__label">Software Version: </span> <span class="shared-item_cards-attributes_component__value">CSS 3</span> </li> </ul> <div class="shared-item_cards-included_files_component__root"> File Types Included: <ul> <li class="shared-item_cards-included_files_component__fileType">HTML</li> <li class="shared-item_cards-included_files_component__fileType">CSS</li> </ul> </div> </div> </div> <div class="shared-item_cards-list-image_card_component__priceWrapper"> <div class="shared-item_cards-list-image_card_component__info"> <div class="shared-item_cards-list-image_card_component__favAndCollections"> <a href="/my/bookmarks/new?item_id=2253518" class="shared-item_cards-collection_button_component__collection" role="button" aria-label="Add to collection" title="Add to collection" rel="nofollow" data-controller="collection-button" data-action="collection-button#open" data-bookmark-button-target="bookmarkButton" data-item-id="2253518" > <span class="shared-item_cards-collection_button_component__icon"> <svg width='100%' height='100%'> <use xlink:href='/storefront/assets/icon_spritesheet-2c8173174a30370958101e9b5e0dc4a0503c16573b4e2c0961245849681b052e.svg#collection'></use> </svg> </span> </a> <span class="shared-item_cards-list-image_card_component__buttonSeparator"></span> <form method="post" action="/my/favorites/2253518" data-controller="favorite-button" data-action="submit->favorite-button#submit favoritesStoreUpdated@window->favorite-button#updateFromStore"> <input type="hidden" name="_method" value="post" data-favorite-button-target="formMethod"> <button type="submit" aria-label="Add to Favorites" class="shared-item_cards-favorite_button_component__favoriteButton" data-favorite-button-target="favoriteButton" data-favorited="false" data-item-id="2253518"> <svg width='100%' height='100%'> <use xlink:href='/storefront/assets/icon_spritesheet-2c8173174a30370958101e9b5e0dc4a0503c16573b4e2c0961245849681b052e.svg#heart'></use> </svg> </button> </form> </div> <div class="shared-item_cards-price_component__root"> $5 </div> <div class="shared-item_cards-list-image_card_component__ratingWrapper"><div class="shared-stars_rating_component__root"> <div class="shared-stars_rating_component__starRating" role="img" aria-label="Rated 4.57 out of 5, 7 reviews" > <span class="shared-stars_rating_component__star"> <svg width='100%' height='100%'> <use xlink:href='/storefront/assets/icon_spritesheet-2c8173174a30370958101e9b5e0dc4a0503c16573b4e2c0961245849681b052e.svg#stars_4.5'></use> </svg> </span> </div> <span aria-hidden="true" class="shared-stars_rating_component__starRatingCount">(7)</span> </div> </div> <div class="shared-item_cards-sales_component__root"> 88 Sales </div> <div class="shared-item_cards-list-image_card_component__lastUpdated shared-item_cards-list-image_card_component__tinyText"> Last updated: 03 May 12 </div> </div> <div class="shared-item_cards-list-image_card_component__coverWrapper"> <div class="shared-item_cards-list-image_card_component__addToCartDesktop"> <a class="shared-item_cards-add_to_cart_button_component__root" role="button" title="Add to cart" aria-label="Add to cart" href="/cart/configure_before_adding/2253518" rel="nofollow" data-controller="cart-button modal-commander add-to-cart-event" data-action="click->modal-commander#open cartStoreUpdated@window->cart-button#updateFromStore click->add-to-cart-event#sendEvent" data-modal-commander-url-value="/my/cart_entries?item_id=2253518" data-modal-commander-method-value="POST" data-cart-button-item-id-value="2253518" data-cart-button-in-cart-class="shared-item_cards-add_to_cart_button_component__inCart" data-analytics-cart-button-payload="{"eventName":"add_to_cart","eventType":"user","quantityUpdate":false,"ecommerce":{"currency":"USD","value":"5.00","items":[{"affiliation":"codecanyon","itemId":2253518,"itemName":"CSS3 Hover Pack","itemBrand":"pauloreg","itemCategory":"css","itemCategory2":"animations-and-effects","itemCategory3":null,"price":"5.00","quantity":1}]}}" > Add to Cart </a> </div> <div class="shared-item_cards-list-image_card_component__addToCartMobile"> <a class="shared-item_cards-add_to_cart_button_component__root shared-item_cards-add_to_cart_button_component__compact" role="button" title="Add to cart" aria-label="Add to cart" href="/cart/configure_before_adding/2253518" rel="nofollow" data-controller="cart-button modal-commander add-to-cart-event" data-action="click->modal-commander#open cartStoreUpdated@window->cart-button#updateFromStore click->add-to-cart-event#sendEvent" data-modal-commander-url-value="/my/cart_entries?item_id=2253518" data-modal-commander-method-value="POST" data-cart-button-item-id-value="2253518" data-cart-button-in-cart-class="shared-item_cards-add_to_cart_button_component__inCart" data-analytics-cart-button-payload="{"eventName":"add_to_cart","eventType":"user","quantityUpdate":false,"ecommerce":{"currency":"USD","value":"5.00","items":[{"affiliation":"codecanyon","itemId":2253518,"itemName":"CSS3 Hover Pack","itemBrand":"pauloreg","itemCategory":"css","itemCategory2":"animations-and-effects","itemCategory3":null,"price":"5.00","quantity":1}]}}" > <span class="shared-item_cards-add_to_cart_button_component__cartIcon"> <svg width='100%' height='100%'> <use xlink:href='/storefront/assets/icon_spritesheet-2c8173174a30370958101e9b5e0dc4a0503c16573b4e2c0961245849681b052e.svg#cart'></use> </svg> </span> </a> </div> </div> </div> </div> </div> </div> <div class="shared-item_cards-card_component__root"> <div class="shared-item_cards-list-image_card_component__root" data-favorites-loader-target="item" data-item-id="14413214" data-price="5.00" data-site="codecanyon" > <div class="shared-item_cards-list-image_card_component__contentWrapper shared-item_cards-list-image_card_component__landscapeImage"> <a class="shared-item_cards-list-image_card_component__itemLinkOverlay" href="https://codecanyon.net/item/ayan-css3-link-hover-effects/14413214" title="Ayan. CSS3 Link Hover Effects" aria-label="View Ayan. CSS3 Link Hover Effects" data-turbo="false" data-analytics-click-payload="{"eventName":"select_item","eventType":"user","ecommerce":{"currency":"USD","items":[{"affiliation":"codecanyon","itemId":14413214,"itemName":"Ayan. CSS3 Link Hover Effects","itemBrand":"reverietech","itemCategory":"css","itemCategory2":"animations-and-effects","itemCategory3":null,"price":"5.00","quantity":1}]}}"></a> <div class="shared-item_cards-list-image_card_component__imageWrapper"> <div class="shared-item_cards-preview_image_component__carousel shared-item_cards-preview_image_component__singleImage" style="padding-bottom: 50.847457627118644%" > <a class="shared-item_cards-preview_image_component__imageLink" data-turbo="false" data-analytics-click-payload="{"eventName":"select_item","eventType":"user","ecommerce":{"currency":"USD","items":[{"affiliation":"codecanyon","itemId":14413214,"itemName":"Ayan. CSS3 Link Hover Effects","itemBrand":"reverietech","itemCategory":"css","itemCategory2":"animations-and-effects","itemCategory3":null,"price":"5.00","quantity":1}]}}" href="https://codecanyon.net/item/ayan-css3-link-hover-effects/14413214"> <img src="https://market-resized.envatousercontent.com/previews/files/174808665/ayan.jpg?w=590&h=300&cf_fit=crop&crop=top&format=auto&q=85&s=f86b6188aa7dbba92ec848f7297c5f89a9b947051d27ce8680506894fd260acf" loading="lazy" style="left: 0%" class="shared-item_cards-preview_image_component__image" alt="Ayan. CSS3 Link Hover Effects" title="Ayan. CSS3 Link Hover Effects" width="590" height="300" data-controller="image-preview" data-action="error->image-preview#setFallback" data-fallback="https://previews.customer.envatousercontent.com/files/174808665/ayan.jpg" data-carousel-target="image" /> </a></div> <div class="shared-item_cards-list-image_card_component__gradient" style="padding-top: 50.847457627118644%;"> <div class="shared-item_cards-list-image_card_component__buttons"> <a href="/my/bookmarks/new?item_id=14413214" class="shared-item_cards-collection_button_component__collection" role="button" aria-label="Add to collection" title="Add to collection" rel="nofollow" data-controller="collection-button" data-action="collection-button#open" data-bookmark-button-target="bookmarkButton" data-item-id="14413214" > <span class="shared-item_cards-collection_button_component__icon"> <svg width='100%' height='100%'> <use xlink:href='/storefront/assets/icon_spritesheet-2c8173174a30370958101e9b5e0dc4a0503c16573b4e2c0961245849681b052e.svg#collection'></use> </svg> </span> </a> <span class="shared-item_cards-list-image_card_component__buttonSeparator"></span> <form method="post" action="/my/favorites/14413214" data-controller="favorite-button" data-action="submit->favorite-button#submit favoritesStoreUpdated@window->favorite-button#updateFromStore"> <input type="hidden" name="_method" value="post" data-favorite-button-target="formMethod"> <button type="submit" aria-label="Add to Favorites" class="shared-item_cards-favorite_button_component__favoriteButton" data-favorite-button-target="favoriteButton" data-favorited="false" data-item-id="14413214"> <svg width='100%' height='100%'> <use xlink:href='/storefront/assets/icon_spritesheet-2c8173174a30370958101e9b5e0dc4a0503c16573b4e2c0961245849681b052e.svg#heart'></use> </svg> </button> </form> </div> </div> </div> <div class="shared-item_cards-list-image_card_component__detailsWrapper"> <h3 class="shared-item_cards-item_name_component__root"> <a class="shared-item_cards-item_name_component__itemNameLink" tabindex="0" data-turbo="false" data-analytics-click-payload="{"eventName":"select_item","eventType":"user","ecommerce":{"currency":"USD","items":[{"affiliation":"codecanyon","itemId":14413214,"itemName":"Ayan. CSS3 Link Hover Effects","itemBrand":"reverietech","itemCategory":"css","itemCategory2":"animations-and-effects","itemCategory3":null,"price":"5.00","quantity":1}]}}" href="https://codecanyon.net/item/ayan-css3-link-hover-effects/14413214">Ayan. CSS3 Link Hover Effects</a> </h3> <div> <div class="shared-item_cards-author_category_component__root"> <i>by</i> <a href="https://codecanyon.net/user/reverietech" class="shared-item_cards-author_category_component__link" rel="nofollow" data-turbo="false" > reverietech </a> in <a href="/category/css/animations-and-effects" class="shared-item_cards-author_category_component__link" > Animations And Effects </a> </div> </div> <div class="shared-item_cards-list-image_card_component__attrsWrapper"> <ul> <li class="shared-item_cards-attributes_component__attribute"> <span class="shared-item_cards-attributes_component__label">Software Version: </span> <span class="shared-item_cards-attributes_component__value">CSS 2 - 3</span> </li> </ul> <div class="shared-item_cards-included_files_component__root"> File Types Included: <ul> <li class="shared-item_cards-included_files_component__fileType">HTML</li> <li class="shared-item_cards-included_files_component__fileType">CSS</li> </ul> </div> </div> </div> <div class="shared-item_cards-list-image_card_component__priceWrapper"> <div class="shared-item_cards-list-image_card_component__info"> <div class="shared-item_cards-list-image_card_component__favAndCollections"> <a href="/my/bookmarks/new?item_id=14413214" class="shared-item_cards-collection_button_component__collection" role="button" aria-label="Add to collection" title="Add to collection" rel="nofollow" data-controller="collection-button" data-action="collection-button#open" data-bookmark-button-target="bookmarkButton" data-item-id="14413214" > <span class="shared-item_cards-collection_button_component__icon"> <svg width='100%' height='100%'> <use xlink:href='/storefront/assets/icon_spritesheet-2c8173174a30370958101e9b5e0dc4a0503c16573b4e2c0961245849681b052e.svg#collection'></use> </svg> </span> </a> <span class="shared-item_cards-list-image_card_component__buttonSeparator"></span> <form method="post" action="/my/favorites/14413214" data-controller="favorite-button" data-action="submit->favorite-button#submit favoritesStoreUpdated@window->favorite-button#updateFromStore"> <input type="hidden" name="_method" value="post" data-favorite-button-target="formMethod"> <button type="submit" aria-label="Add to Favorites" class="shared-item_cards-favorite_button_component__favoriteButton" data-favorite-button-target="favoriteButton" data-favorited="false" data-item-id="14413214"> <svg width='100%' height='100%'> <use xlink:href='/storefront/assets/icon_spritesheet-2c8173174a30370958101e9b5e0dc4a0503c16573b4e2c0961245849681b052e.svg#heart'></use> </svg> </button> </form> </div> <div class="shared-item_cards-price_component__root"> $5 </div> <div class="shared-item_cards-list-image_card_component__ratingWrapper"></div> <div class="shared-item_cards-sales_component__root"> 86 Sales </div> <div class="shared-item_cards-list-image_card_component__lastUpdated shared-item_cards-list-image_card_component__tinyText"> Last updated: 01 Mar 16 </div> </div> <div class="shared-item_cards-list-image_card_component__coverWrapper"> <a class="shared-item_cards-add_to_cart_button_component__root shared-item_cards-add_to_cart_button_component__compact" role="button" title="Add to cart" aria-label="Add to cart" href="/cart/configure_before_adding/14413214" rel="nofollow" data-controller="cart-button modal-commander add-to-cart-event" data-action="click->modal-commander#open cartStoreUpdated@window->cart-button#updateFromStore click->add-to-cart-event#sendEvent" data-modal-commander-url-value="/my/cart_entries?item_id=14413214" data-modal-commander-method-value="POST" data-cart-button-item-id-value="14413214" data-cart-button-in-cart-class="shared-item_cards-add_to_cart_button_component__inCart" data-analytics-cart-button-payload="{"eventName":"add_to_cart","eventType":"user","quantityUpdate":false,"ecommerce":{"currency":"USD","value":"5.00","items":[{"affiliation":"codecanyon","itemId":14413214,"itemName":"Ayan. CSS3 Link Hover Effects","itemBrand":"reverietech","itemCategory":"css","itemCategory2":"animations-and-effects","itemCategory3":null,"price":"5.00","quantity":1}]}}" > <span class="shared-item_cards-add_to_cart_button_component__cartIcon"> <svg width='100%' height='100%'> <use xlink:href='/storefront/assets/icon_spritesheet-2c8173174a30370958101e9b5e0dc4a0503c16573b4e2c0961245849681b052e.svg#cart'></use> </svg> </span> </a> <a href="https://codecanyon.net/item/ayan-css3-link-hover-effects/full_screen_preview/14413214" class="shared-item_cards-preview_button_with_analytics_component__root" target="_blank" rel="noopener" > Live Preview </a> </div> </div> </div> </div> </div> <div class="shared-item_cards-card_component__root"> <div class="shared-item_cards-list-image_card_component__root" data-favorites-loader-target="item" data-item-id="8242708" data-price="6.00" data-site="codecanyon" > <div class="shared-item_cards-list-image_card_component__contentWrapper shared-item_cards-list-image_card_component__landscapeImage"> <a class="shared-item_cards-list-image_card_component__itemLinkOverlay" href="https://codecanyon.net/item/animated-loaders-kit/8242708" title="Animated Loaders KIT" aria-label="View Animated Loaders KIT" data-turbo="false" data-analytics-click-payload="{"eventName":"select_item","eventType":"user","ecommerce":{"currency":"USD","items":[{"affiliation":"codecanyon","itemId":8242708,"itemName":"Animated Loaders KIT","itemBrand":"mmetrodw","itemCategory":"css","itemCategory2":"animations-and-effects","itemCategory3":null,"price":"6.00","quantity":1}]}}"></a> <div class="shared-item_cards-list-image_card_component__imageWrapper"> <div class="shared-item_cards-preview_image_component__carousel shared-item_cards-preview_image_component__singleImage" style="padding-bottom: 50.847457627118644%" > <a class="shared-item_cards-preview_image_component__imageLink" data-turbo="false" data-analytics-click-payload="{"eventName":"select_item","eventType":"user","ecommerce":{"currency":"USD","items":[{"affiliation":"codecanyon","itemId":8242708,"itemName":"Animated Loaders KIT","itemBrand":"mmetrodw","itemCategory":"css","itemCategory2":"animations-and-effects","itemCategory3":null,"price":"6.00","quantity":1}]}}" href="https://codecanyon.net/item/animated-loaders-kit/8242708"> <img src="https://market-resized.envatousercontent.com/previews/files/97708465/preview.jpg?w=590&h=300&cf_fit=crop&crop=top&format=auto&q=85&s=33fcfeaae236a77393b23cb967fcb3431f602d76b2ff366e952b300478310c27" loading="lazy" style="left: 0%" class="shared-item_cards-preview_image_component__image" alt="Animated Loaders KIT" title="Animated Loaders KIT" width="590" height="300" data-controller="image-preview" data-action="error->image-preview#setFallback" data-fallback="https://previews.customer.envatousercontent.com/files/97708465/preview.jpg" data-carousel-target="image" /> </a></div> <div class="shared-item_cards-list-image_card_component__gradient" style="padding-top: 50.847457627118644%;"> <div class="shared-item_cards-list-image_card_component__buttons"> <a href="/my/bookmarks/new?item_id=8242708" class="shared-item_cards-collection_button_component__collection" role="button" aria-label="Add to collection" title="Add to collection" rel="nofollow" data-controller="collection-button" data-action="collection-button#open" data-bookmark-button-target="bookmarkButton" data-item-id="8242708" > <span class="shared-item_cards-collection_button_component__icon"> <svg width='100%' height='100%'> <use xlink:href='/storefront/assets/icon_spritesheet-2c8173174a30370958101e9b5e0dc4a0503c16573b4e2c0961245849681b052e.svg#collection'></use> </svg> </span> </a> <span class="shared-item_cards-list-image_card_component__buttonSeparator"></span> <form method="post" action="/my/favorites/8242708" data-controller="favorite-button" data-action="submit->favorite-button#submit favoritesStoreUpdated@window->favorite-button#updateFromStore"> <input type="hidden" name="_method" value="post" data-favorite-button-target="formMethod"> <button type="submit" aria-label="Add to Favorites" class="shared-item_cards-favorite_button_component__favoriteButton" data-favorite-button-target="favoriteButton" data-favorited="false" data-item-id="8242708"> <svg width='100%' height='100%'> <use xlink:href='/storefront/assets/icon_spritesheet-2c8173174a30370958101e9b5e0dc4a0503c16573b4e2c0961245849681b052e.svg#heart'></use> </svg> </button> </form> </div> </div> </div> <div class="shared-item_cards-list-image_card_component__detailsWrapper"> <h3 class="shared-item_cards-item_name_component__root"> <a class="shared-item_cards-item_name_component__itemNameLink" tabindex="0" data-turbo="false" data-analytics-click-payload="{"eventName":"select_item","eventType":"user","ecommerce":{"currency":"USD","items":[{"affiliation":"codecanyon","itemId":8242708,"itemName":"Animated Loaders KIT","itemBrand":"mmetrodw","itemCategory":"css","itemCategory2":"animations-and-effects","itemCategory3":null,"price":"6.00","quantity":1}]}}" href="https://codecanyon.net/item/animated-loaders-kit/8242708">Animated Loaders KIT</a> </h3> <div> <div class="shared-item_cards-author_category_component__root"> <i>by</i> <a href="https://codecanyon.net/user/mmetrodw" class="shared-item_cards-author_category_component__link" rel="nofollow" data-turbo="false" > mmetrodw </a> in <a href="/category/css/animations-and-effects" class="shared-item_cards-author_category_component__link" > Animations And Effects </a> </div> </div> <div class="shared-item_cards-list-image_card_component__attrsWrapper"> <ul> <li class="shared-item_cards-attributes_component__attribute"> <span class="shared-item_cards-attributes_component__label">Software Version: </span> <span class="shared-item_cards-attributes_component__value">CSS 2 - 3</span> </li> </ul> <div class="shared-item_cards-included_files_component__root"> File Types Included: <ul> <li class="shared-item_cards-included_files_component__fileType">HTML</li> <li class="shared-item_cards-included_files_component__fileType">CSS</li> </ul> </div> </div> </div> <div class="shared-item_cards-list-image_card_component__priceWrapper"> <div class="shared-item_cards-list-image_card_component__info"> <div class="shared-item_cards-list-image_card_component__favAndCollections"> <a href="/my/bookmarks/new?item_id=8242708" class="shared-item_cards-collection_button_component__collection" role="button" aria-label="Add to collection" title="Add to collection" rel="nofollow" data-controller="collection-button" data-action="collection-button#open" data-bookmark-button-target="bookmarkButton" data-item-id="8242708" > <span class="shared-item_cards-collection_button_component__icon"> <svg width='100%' height='100%'> <use xlink:href='/storefront/assets/icon_spritesheet-2c8173174a30370958101e9b5e0dc4a0503c16573b4e2c0961245849681b052e.svg#collection'></use> </svg> </span> </a> <span class="shared-item_cards-list-image_card_component__buttonSeparator"></span> <form method="post" action="/my/favorites/8242708" data-controller="favorite-button" data-action="submit->favorite-button#submit favoritesStoreUpdated@window->favorite-button#updateFromStore"> <input type="hidden" name="_method" value="post" data-favorite-button-target="formMethod"> <button type="submit" aria-label="Add to Favorites" class="shared-item_cards-favorite_button_component__favoriteButton" data-favorite-button-target="favoriteButton" data-favorited="false" data-item-id="8242708"> <svg width='100%' height='100%'> <use xlink:href='/storefront/assets/icon_spritesheet-2c8173174a30370958101e9b5e0dc4a0503c16573b4e2c0961245849681b052e.svg#heart'></use> </svg> </button> </form> </div> <div class="shared-item_cards-price_component__root"> $6 </div> <div class="shared-item_cards-list-image_card_component__ratingWrapper"><div class="shared-stars_rating_component__root"> <div class="shared-stars_rating_component__starRating" role="img" aria-label="Rated 4.67 out of 5, 3 reviews" > <span class="shared-stars_rating_component__star"> <svg width='100%' height='100%'> <use xlink:href='/storefront/assets/icon_spritesheet-2c8173174a30370958101e9b5e0dc4a0503c16573b4e2c0961245849681b052e.svg#stars_4.5'></use> </svg> </span> </div> <span aria-hidden="true" class="shared-stars_rating_component__starRatingCount">(3)</span> </div> </div> <div class="shared-item_cards-sales_component__root"> 83 Sales </div> <div class="shared-item_cards-list-image_card_component__lastUpdated shared-item_cards-list-image_card_component__tinyText"> Last updated: 15 Jul 14 </div> </div> <div class="shared-item_cards-list-image_card_component__coverWrapper"> <a class="shared-item_cards-add_to_cart_button_component__root shared-item_cards-add_to_cart_button_component__compact" role="button" title="Add to cart" aria-label="Add to cart" href="/cart/configure_before_adding/8242708" rel="nofollow" data-controller="cart-button modal-commander add-to-cart-event" data-action="click->modal-commander#open cartStoreUpdated@window->cart-button#updateFromStore click->add-to-cart-event#sendEvent" data-modal-commander-url-value="/my/cart_entries?item_id=8242708" data-modal-commander-method-value="POST" data-cart-button-item-id-value="8242708" data-cart-button-in-cart-class="shared-item_cards-add_to_cart_button_component__inCart" data-analytics-cart-button-payload="{"eventName":"add_to_cart","eventType":"user","quantityUpdate":false,"ecommerce":{"currency":"USD","value":"6.00","items":[{"affiliation":"codecanyon","itemId":8242708,"itemName":"Animated Loaders KIT","itemBrand":"mmetrodw","itemCategory":"css","itemCategory2":"animations-and-effects","itemCategory3":null,"price":"6.00","quantity":1}]}}" > <span class="shared-item_cards-add_to_cart_button_component__cartIcon"> <svg width='100%' height='100%'> <use xlink:href='/storefront/assets/icon_spritesheet-2c8173174a30370958101e9b5e0dc4a0503c16573b4e2c0961245849681b052e.svg#cart'></use> </svg> </span> </a> <a href="https://codecanyon.net/item/animated-loaders-kit/full_screen_preview/8242708" class="shared-item_cards-preview_button_with_analytics_component__root" target="_blank" rel="noopener" > Live Preview </a> </div> </div> </div> </div> </div> <div class="shared-item_cards-card_component__root"> <div class="shared-item_cards-list-image_card_component__root" data-favorites-loader-target="item" data-item-id="30082937" data-price="2.00" data-site="codecanyon" > <div class="shared-item_cards-list-image_card_component__contentWrapper shared-item_cards-list-image_card_component__landscapeImage"> <a class="shared-item_cards-list-image_card_component__itemLinkOverlay" href="https://codecanyon.net/item/css3-glowing-effect-button/30082937" title="CSS3 Glowing Effect Button" aria-label="View CSS3 Glowing Effect Button" data-turbo="false" data-analytics-click-payload="{"eventName":"select_item","eventType":"user","ecommerce":{"currency":"USD","items":[{"affiliation":"codecanyon","itemId":30082937,"itemName":"CSS3 Glowing Effect Button","itemBrand":"romincomputer","itemCategory":"css","itemCategory2":"animations-and-effects","itemCategory3":null,"price":"2.00","quantity":1}]}}"></a> <div class="shared-item_cards-list-image_card_component__imageWrapper"> <div class="shared-item_cards-preview_image_component__carousel shared-item_cards-preview_image_component__singleImage" style="padding-bottom: 50.847457627118644%" > <a class="shared-item_cards-preview_image_component__imageLink" data-turbo="false" data-analytics-click-payload="{"eventName":"select_item","eventType":"user","ecommerce":{"currency":"USD","items":[{"affiliation":"codecanyon","itemId":30082937,"itemName":"CSS3 Glowing Effect Button","itemBrand":"romincomputer","itemCategory":"css","itemCategory2":"animations-and-effects","itemCategory3":null,"price":"2.00","quantity":1}]}}" href="https://codecanyon.net/item/css3-glowing-effect-button/30082937"> <img src="https://market-resized.envatousercontent.com/previews/files/319559220/Inline+Preview+Image.jpg?w=590&h=300&cf_fit=crop&crop=top&format=auto&q=85&s=d0952d86b4146c48b555ee11176c193b9bc79485aecb5a338b23d8088a295076" loading="lazy" style="left: 0%" class="shared-item_cards-preview_image_component__image" alt="CSS3 Glowing Effect Button" title="CSS3 Glowing Effect Button" width="590" height="300" data-controller="image-preview" data-action="error->image-preview#setFallback" data-fallback="https://previews.customer.envatousercontent.com/files/319559220/Inline%20Preview%20Image.jpg" data-carousel-target="image" /> </a></div> <div class="shared-item_cards-list-image_card_component__gradient" style="padding-top: 50.847457627118644%;"> <div class="shared-item_cards-list-image_card_component__buttons"> <a href="/my/bookmarks/new?item_id=30082937" class="shared-item_cards-collection_button_component__collection" role="button" aria-label="Add to collection" title="Add to collection" rel="nofollow" data-controller="collection-button" data-action="collection-button#open" data-bookmark-button-target="bookmarkButton" data-item-id="30082937" > <span class="shared-item_cards-collection_button_component__icon"> <svg width='100%' height='100%'> <use xlink:href='/storefront/assets/icon_spritesheet-2c8173174a30370958101e9b5e0dc4a0503c16573b4e2c0961245849681b052e.svg#collection'></use> </svg> </span> </a> <span class="shared-item_cards-list-image_card_component__buttonSeparator"></span> <form method="post" action="/my/favorites/30082937" data-controller="favorite-button" data-action="submit->favorite-button#submit favoritesStoreUpdated@window->favorite-button#updateFromStore"> <input type="hidden" name="_method" value="post" data-favorite-button-target="formMethod"> <button type="submit" aria-label="Add to Favorites" class="shared-item_cards-favorite_button_component__favoriteButton" data-favorite-button-target="favoriteButton" data-favorited="false" data-item-id="30082937"> <svg width='100%' height='100%'> <use xlink:href='/storefront/assets/icon_spritesheet-2c8173174a30370958101e9b5e0dc4a0503c16573b4e2c0961245849681b052e.svg#heart'></use> </svg> </button> </form> </div> </div> </div> <div class="shared-item_cards-list-image_card_component__detailsWrapper"> <h3 class="shared-item_cards-item_name_component__root"> <a class="shared-item_cards-item_name_component__itemNameLink" tabindex="0" data-turbo="false" data-analytics-click-payload="{"eventName":"select_item","eventType":"user","ecommerce":{"currency":"USD","items":[{"affiliation":"codecanyon","itemId":30082937,"itemName":"CSS3 Glowing Effect Button","itemBrand":"romincomputer","itemCategory":"css","itemCategory2":"animations-and-effects","itemCategory3":null,"price":"2.00","quantity":1}]}}" href="https://codecanyon.net/item/css3-glowing-effect-button/30082937">CSS3 Glowing Effect Button</a> </h3> <div> <div class="shared-item_cards-author_category_component__root"> <i>by</i> <a href="https://codecanyon.net/user/romincomputer" class="shared-item_cards-author_category_component__link" rel="nofollow" data-turbo="false" > romincomputer </a> in <a href="/category/css/animations-and-effects" class="shared-item_cards-author_category_component__link" > Animations And Effects </a> </div> </div> <div class="shared-item_cards-list-image_card_component__attrsWrapper"> <ul> <li class="shared-item_cards-attributes_component__attribute"> <span class="shared-item_cards-attributes_component__label">Software Version: </span> <span class="shared-item_cards-attributes_component__value">CSS 2 - 3</span> </li> </ul> <div class="shared-item_cards-included_files_component__root"> File Types Included: <ul> <li class="shared-item_cards-included_files_component__fileType">HTML</li> <li class="shared-item_cards-included_files_component__fileType">CSS</li> </ul> </div> </div> </div> <div class="shared-item_cards-list-image_card_component__priceWrapper"> <div class="shared-item_cards-list-image_card_component__info"> <div class="shared-item_cards-list-image_card_component__favAndCollections"> <a href="/my/bookmarks/new?item_id=30082937" class="shared-item_cards-collection_button_component__collection" role="button" aria-label="Add to collection" title="Add to collection" rel="nofollow" data-controller="collection-button" data-action="collection-button#open" data-bookmark-button-target="bookmarkButton" data-item-id="30082937" > <span class="shared-item_cards-collection_button_component__icon"> <svg width='100%' height='100%'> <use xlink:href='/storefront/assets/icon_spritesheet-2c8173174a30370958101e9b5e0dc4a0503c16573b4e2c0961245849681b052e.svg#collection'></use> </svg> </span> </a> <span class="shared-item_cards-list-image_card_component__buttonSeparator"></span> <form method="post" action="/my/favorites/30082937" data-controller="favorite-button" data-action="submit->favorite-button#submit favoritesStoreUpdated@window->favorite-button#updateFromStore"> <input type="hidden" name="_method" value="post" data-favorite-button-target="formMethod"> <button type="submit" aria-label="Add to Favorites" class="shared-item_cards-favorite_button_component__favoriteButton" data-favorite-button-target="favoriteButton" data-favorited="false" data-item-id="30082937"> <svg width='100%' height='100%'> <use xlink:href='/storefront/assets/icon_spritesheet-2c8173174a30370958101e9b5e0dc4a0503c16573b4e2c0961245849681b052e.svg#heart'></use> </svg> </button> </form> </div> <div class="shared-item_cards-price_component__root"> $2 </div> <div class="shared-item_cards-list-image_card_component__ratingWrapper"><div class="shared-stars_rating_component__root"> <div class="shared-stars_rating_component__starRating" role="img" aria-label="Rated 3.67 out of 5, 3 reviews" > <span class="shared-stars_rating_component__star"> <svg width='100%' height='100%'> <use xlink:href='/storefront/assets/icon_spritesheet-2c8173174a30370958101e9b5e0dc4a0503c16573b4e2c0961245849681b052e.svg#stars_3.5'></use> </svg> </span> </div> <span aria-hidden="true" class="shared-stars_rating_component__starRatingCount">(3)</span> </div> </div> <div class="shared-item_cards-sales_component__root"> 81 Sales </div> <div class="shared-item_cards-list-image_card_component__lastUpdated shared-item_cards-list-image_card_component__tinyText"> Last updated: 22 Jan 21 </div> </div> <div class="shared-item_cards-list-image_card_component__coverWrapper"> <div class="shared-item_cards-list-image_card_component__addToCartDesktop"> <a class="shared-item_cards-add_to_cart_button_component__root" role="button" title="Add to cart" aria-label="Add to cart" href="/cart/configure_before_adding/30082937" rel="nofollow" data-controller="cart-button modal-commander add-to-cart-event" data-action="click->modal-commander#open cartStoreUpdated@window->cart-button#updateFromStore click->add-to-cart-event#sendEvent" data-modal-commander-url-value="/my/cart_entries?item_id=30082937" data-modal-commander-method-value="POST" data-cart-button-item-id-value="30082937" data-cart-button-in-cart-class="shared-item_cards-add_to_cart_button_component__inCart" data-analytics-cart-button-payload="{"eventName":"add_to_cart","eventType":"user","quantityUpdate":false,"ecommerce":{"currency":"USD","value":"2.00","items":[{"affiliation":"codecanyon","itemId":30082937,"itemName":"CSS3 Glowing Effect Button","itemBrand":"romincomputer","itemCategory":"css","itemCategory2":"animations-and-effects","itemCategory3":null,"price":"2.00","quantity":1}]}}" > Add to Cart </a> </div> <div class="shared-item_cards-list-image_card_component__addToCartMobile"> <a class="shared-item_cards-add_to_cart_button_component__root shared-item_cards-add_to_cart_button_component__compact" role="button" title="Add to cart" aria-label="Add to cart" href="/cart/configure_before_adding/30082937" rel="nofollow" data-controller="cart-button modal-commander add-to-cart-event" data-action="click->modal-commander#open cartStoreUpdated@window->cart-button#updateFromStore click->add-to-cart-event#sendEvent" data-modal-commander-url-value="/my/cart_entries?item_id=30082937" data-modal-commander-method-value="POST" data-cart-button-item-id-value="30082937" data-cart-button-in-cart-class="shared-item_cards-add_to_cart_button_component__inCart" data-analytics-cart-button-payload="{"eventName":"add_to_cart","eventType":"user","quantityUpdate":false,"ecommerce":{"currency":"USD","value":"2.00","items":[{"affiliation":"codecanyon","itemId":30082937,"itemName":"CSS3 Glowing Effect Button","itemBrand":"romincomputer","itemCategory":"css","itemCategory2":"animations-and-effects","itemCategory3":null,"price":"2.00","quantity":1}]}}" > <span class="shared-item_cards-add_to_cart_button_component__cartIcon"> <svg width='100%' height='100%'> <use xlink:href='/storefront/assets/icon_spritesheet-2c8173174a30370958101e9b5e0dc4a0503c16573b4e2c0961245849681b052e.svg#cart'></use> </svg> </span> </a> </div> </div> </div> </div> </div> </div> <div class="shared-item_cards-card_component__root"> <div class="shared-item_cards-list-image_card_component__root" data-favorites-loader-target="item" data-item-id="13826565" data-price="10.00" data-site="codecanyon" > <div class="shared-item_cards-list-image_card_component__contentWrapper shared-item_cards-list-image_card_component__landscapeImage"> <a class="shared-item_cards-list-image_card_component__itemLinkOverlay" href="https://codecanyon.net/item/50-pure-css3-preloaders/13826565" title="50+ Pure CSS3 Preloaders" aria-label="View 50+ Pure CSS3 Preloaders" data-turbo="false" data-analytics-click-payload="{"eventName":"select_item","eventType":"user","ecommerce":{"currency":"USD","items":[{"affiliation":"codecanyon","itemId":13826565,"itemName":"50+ Pure CSS3 Preloaders","itemBrand":"fullstackdev","itemCategory":"css","itemCategory2":"animations-and-effects","itemCategory3":null,"price":"10.00","quantity":1}]}}"></a> <div class="shared-item_cards-list-image_card_component__imageWrapper"> <div class="shared-item_cards-preview_image_component__carousel shared-item_cards-preview_image_component__singleImage" style="padding-bottom: 50.847457627118644%" > <a class="shared-item_cards-preview_image_component__imageLink" data-turbo="false" data-analytics-click-payload="{"eventName":"select_item","eventType":"user","ecommerce":{"currency":"USD","items":[{"affiliation":"codecanyon","itemId":13826565,"itemName":"50+ Pure CSS3 Preloaders","itemBrand":"fullstackdev","itemCategory":"css","itemCategory2":"animations-and-effects","itemCategory3":null,"price":"10.00","quantity":1}]}}" href="https://codecanyon.net/item/50-pure-css3-preloaders/13826565"> <img src="https://market-resized.envatousercontent.com/previews/files/182294705/Preloader_inline.jpg?w=590&h=300&cf_fit=crop&crop=top&format=auto&q=85&s=b2d48e6fdfe95eddad9e19d53afaf916b9d1f8a30d796e2378ea218f2b6b3e6c" loading="lazy" style="left: 0%" class="shared-item_cards-preview_image_component__image" alt="50+ Pure CSS3 Preloaders" title="50+ Pure CSS3 Preloaders" width="590" height="300" data-controller="image-preview" data-action="error->image-preview#setFallback" data-fallback="https://previews.customer.envatousercontent.com/files/182294705/Preloader_inline.jpg" data-carousel-target="image" /> </a></div> <div class="shared-item_cards-list-image_card_component__gradient" style="padding-top: 50.847457627118644%;"> <div class="shared-item_cards-list-image_card_component__buttons"> <a href="/my/bookmarks/new?item_id=13826565" class="shared-item_cards-collection_button_component__collection" role="button" aria-label="Add to collection" title="Add to collection" rel="nofollow" data-controller="collection-button" data-action="collection-button#open" data-bookmark-button-target="bookmarkButton" data-item-id="13826565" > <span class="shared-item_cards-collection_button_component__icon"> <svg width='100%' height='100%'> <use xlink:href='/storefront/assets/icon_spritesheet-2c8173174a30370958101e9b5e0dc4a0503c16573b4e2c0961245849681b052e.svg#collection'></use> </svg> </span> </a> <span class="shared-item_cards-list-image_card_component__buttonSeparator"></span> <form method="post" action="/my/favorites/13826565" data-controller="favorite-button" data-action="submit->favorite-button#submit favoritesStoreUpdated@window->favorite-button#updateFromStore"> <input type="hidden" name="_method" value="post" data-favorite-button-target="formMethod"> <button type="submit" aria-label="Add to Favorites" class="shared-item_cards-favorite_button_component__favoriteButton" data-favorite-button-target="favoriteButton" data-favorited="false" data-item-id="13826565"> <svg width='100%' height='100%'> <use xlink:href='/storefront/assets/icon_spritesheet-2c8173174a30370958101e9b5e0dc4a0503c16573b4e2c0961245849681b052e.svg#heart'></use> </svg> </button> </form> </div> </div> </div> <div class="shared-item_cards-list-image_card_component__detailsWrapper"> <h3 class="shared-item_cards-item_name_component__root"> <a class="shared-item_cards-item_name_component__itemNameLink" tabindex="0" data-turbo="false" data-analytics-click-payload="{"eventName":"select_item","eventType":"user","ecommerce":{"currency":"USD","items":[{"affiliation":"codecanyon","itemId":13826565,"itemName":"50+ Pure CSS3 Preloaders","itemBrand":"fullstackdev","itemCategory":"css","itemCategory2":"animations-and-effects","itemCategory3":null,"price":"10.00","quantity":1}]}}" href="https://codecanyon.net/item/50-pure-css3-preloaders/13826565">50+ Pure CSS3 Preloaders</a> </h3> <div> <div class="shared-item_cards-author_category_component__root"> <i>by</i> <a href="https://codecanyon.net/user/fullstackdev" class="shared-item_cards-author_category_component__link" rel="nofollow" data-turbo="false" > fullstackdev </a> in <a href="/category/css/animations-and-effects" class="shared-item_cards-author_category_component__link" > Animations And Effects </a> </div> </div> <div class="shared-item_cards-list-image_card_component__attrsWrapper"> <ul> <li class="shared-item_cards-attributes_component__attribute"> <span class="shared-item_cards-attributes_component__label">Software Version: </span> <span class="shared-item_cards-attributes_component__value">CSS 3</span> </li> </ul> <div class="shared-item_cards-included_files_component__root"> File Types Included: <ul> <li class="shared-item_cards-included_files_component__fileType">HTML</li> <li class="shared-item_cards-included_files_component__fileType">CSS</li> </ul> </div> </div> </div> <div class="shared-item_cards-list-image_card_component__priceWrapper"> <div class="shared-item_cards-list-image_card_component__info"> <div class="shared-item_cards-list-image_card_component__favAndCollections"> <a href="/my/bookmarks/new?item_id=13826565" class="shared-item_cards-collection_button_component__collection" role="button" aria-label="Add to collection" title="Add to collection" rel="nofollow" data-controller="collection-button" data-action="collection-button#open" data-bookmark-button-target="bookmarkButton" data-item-id="13826565" > <span class="shared-item_cards-collection_button_component__icon"> <svg width='100%' height='100%'> <use xlink:href='/storefront/assets/icon_spritesheet-2c8173174a30370958101e9b5e0dc4a0503c16573b4e2c0961245849681b052e.svg#collection'></use> </svg> </span> </a> <span class="shared-item_cards-list-image_card_component__buttonSeparator"></span> <form method="post" action="/my/favorites/13826565" data-controller="favorite-button" data-action="submit->favorite-button#submit favoritesStoreUpdated@window->favorite-button#updateFromStore"> <input type="hidden" name="_method" value="post" data-favorite-button-target="formMethod"> <button type="submit" aria-label="Add to Favorites" class="shared-item_cards-favorite_button_component__favoriteButton" data-favorite-button-target="favoriteButton" data-favorited="false" data-item-id="13826565"> <svg width='100%' height='100%'> <use xlink:href='/storefront/assets/icon_spritesheet-2c8173174a30370958101e9b5e0dc4a0503c16573b4e2c0961245849681b052e.svg#heart'></use> </svg> </button> </form> </div> <div class="shared-item_cards-price_component__root"> $10 </div> <div class="shared-item_cards-list-image_card_component__ratingWrapper"><div class="shared-stars_rating_component__root"> <div class="shared-stars_rating_component__starRating" role="img" aria-label="Rated 5.0 out of 5, 5 reviews" > <span class="shared-stars_rating_component__star"> <svg width='100%' height='100%'> <use xlink:href='/storefront/assets/icon_spritesheet-2c8173174a30370958101e9b5e0dc4a0503c16573b4e2c0961245849681b052e.svg#stars_5.0'></use> </svg> </span> </div> <span aria-hidden="true" class="shared-stars_rating_component__starRatingCount">(5)</span> </div> </div> <div class="shared-item_cards-sales_component__root"> 73 Sales </div> <div class="shared-item_cards-list-image_card_component__lastUpdated shared-item_cards-list-image_card_component__tinyText"> Last updated: 16 Apr 16 </div> </div> <div class="shared-item_cards-list-image_card_component__coverWrapper"> <a class="shared-item_cards-add_to_cart_button_component__root shared-item_cards-add_to_cart_button_component__compact" role="button" title="Add to cart" aria-label="Add to cart" href="/cart/configure_before_adding/13826565" rel="nofollow" data-controller="cart-button modal-commander add-to-cart-event" data-action="click->modal-commander#open cartStoreUpdated@window->cart-button#updateFromStore click->add-to-cart-event#sendEvent" data-modal-commander-url-value="/my/cart_entries?item_id=13826565" data-modal-commander-method-value="POST" data-cart-button-item-id-value="13826565" data-cart-button-in-cart-class="shared-item_cards-add_to_cart_button_component__inCart" data-analytics-cart-button-payload="{"eventName":"add_to_cart","eventType":"user","quantityUpdate":false,"ecommerce":{"currency":"USD","value":"10.00","items":[{"affiliation":"codecanyon","itemId":13826565,"itemName":"50+ Pure CSS3 Preloaders","itemBrand":"fullstackdev","itemCategory":"css","itemCategory2":"animations-and-effects","itemCategory3":null,"price":"10.00","quantity":1}]}}" > <span class="shared-item_cards-add_to_cart_button_component__cartIcon"> <svg width='100%' height='100%'> <use xlink:href='/storefront/assets/icon_spritesheet-2c8173174a30370958101e9b5e0dc4a0503c16573b4e2c0961245849681b052e.svg#cart'></use> </svg> </span> </a> <a href="https://codecanyon.net/item/50-pure-css3-preloaders/full_screen_preview/13826565" class="shared-item_cards-preview_button_with_analytics_component__root" target="_blank" rel="noopener" > Live Preview </a> </div> </div> </div> </div> </div> <div class="shared-item_cards-card_component__root"> <div class="shared-item_cards-list-image_card_component__root" data-favorites-loader-target="item" data-item-id="19326566" data-price="5.00" data-site="codecanyon" > <div class="shared-item_cards-list-image_card_component__contentWrapper shared-item_cards-list-image_card_component__landscapeImage"> <a class="shared-item_cards-list-image_card_component__itemLinkOverlay" href="https://codecanyon.net/item/flutter-css-image-hover-effects-lightbox/19326566" title="Flutter - CSS Image Hover Effects & Lightbox" aria-label="View Flutter - CSS Image Hover Effects & Lightbox" data-turbo="false" data-analytics-click-payload="{"eventName":"select_item","eventType":"user","ecommerce":{"currency":"USD","items":[{"affiliation":"codecanyon","itemId":19326566,"itemName":"Flutter - CSS Image Hover Effects \u0026 Lightbox","itemBrand":"reverietech","itemCategory":"css","itemCategory2":"animations-and-effects","itemCategory3":null,"price":"5.00","quantity":1}]}}"></a> <div class="shared-item_cards-list-image_card_component__imageWrapper"> <div class="shared-item_cards-preview_image_component__carousel shared-item_cards-preview_image_component__singleImage" style="padding-bottom: 50.847457627118644%" > <a class="shared-item_cards-preview_image_component__imageLink" data-turbo="false" data-analytics-click-payload="{"eventName":"select_item","eventType":"user","ecommerce":{"currency":"USD","items":[{"affiliation":"codecanyon","itemId":19326566,"itemName":"Flutter - CSS Image Hover Effects \u0026 Lightbox","itemBrand":"reverietech","itemCategory":"css","itemCategory2":"animations-and-effects","itemCategory3":null,"price":"5.00","quantity":1}]}}" href="https://codecanyon.net/item/flutter-css-image-hover-effects-lightbox/19326566"> <img src="https://market-resized.envatousercontent.com/previews/files/220116543/Flutter.png?w=590&h=300&cf_fit=crop&crop=top&format=auto&q=85&s=fe3edb9241f5602ee92b7271c1353acd2ca052b13362bcde3265da6d42abf858" loading="lazy" style="left: 0%" class="shared-item_cards-preview_image_component__image" alt="Flutter - CSS Image Hover Effects & Lightbox" title="Flutter - CSS Image Hover Effects & Lightbox" width="590" height="300" data-controller="image-preview" data-action="error->image-preview#setFallback" data-fallback="https://previews.customer.envatousercontent.com/files/220116543/Flutter.png" data-carousel-target="image" /> </a></div> <div class="shared-item_cards-list-image_card_component__gradient" style="padding-top: 50.847457627118644%;"> <div class="shared-item_cards-list-image_card_component__buttons"> <a href="/my/bookmarks/new?item_id=19326566" class="shared-item_cards-collection_button_component__collection" role="button" aria-label="Add to collection" title="Add to collection" rel="nofollow" data-controller="collection-button" data-action="collection-button#open" data-bookmark-button-target="bookmarkButton" data-item-id="19326566" > <span class="shared-item_cards-collection_button_component__icon"> <svg width='100%' height='100%'> <use xlink:href='/storefront/assets/icon_spritesheet-2c8173174a30370958101e9b5e0dc4a0503c16573b4e2c0961245849681b052e.svg#collection'></use> </svg> </span> </a> <span class="shared-item_cards-list-image_card_component__buttonSeparator"></span> <form method="post" action="/my/favorites/19326566" data-controller="favorite-button" data-action="submit->favorite-button#submit favoritesStoreUpdated@window->favorite-button#updateFromStore"> <input type="hidden" name="_method" value="post" data-favorite-button-target="formMethod"> <button type="submit" aria-label="Add to Favorites" class="shared-item_cards-favorite_button_component__favoriteButton" data-favorite-button-target="favoriteButton" data-favorited="false" data-item-id="19326566"> <svg width='100%' height='100%'> <use xlink:href='/storefront/assets/icon_spritesheet-2c8173174a30370958101e9b5e0dc4a0503c16573b4e2c0961245849681b052e.svg#heart'></use> </svg> </button> </form> </div> </div> </div> <div class="shared-item_cards-list-image_card_component__detailsWrapper"> <h3 class="shared-item_cards-item_name_component__root"> <a class="shared-item_cards-item_name_component__itemNameLink" tabindex="0" data-turbo="false" data-analytics-click-payload="{"eventName":"select_item","eventType":"user","ecommerce":{"currency":"USD","items":[{"affiliation":"codecanyon","itemId":19326566,"itemName":"Flutter - CSS Image Hover Effects \u0026 Lightbox","itemBrand":"reverietech","itemCategory":"css","itemCategory2":"animations-and-effects","itemCategory3":null,"price":"5.00","quantity":1}]}}" href="https://codecanyon.net/item/flutter-css-image-hover-effects-lightbox/19326566">Flutter - CSS Image Hover Effects & Lightbox</a> </h3> <div> <div class="shared-item_cards-author_category_component__root"> <i>by</i> <a href="https://codecanyon.net/user/reverietech" class="shared-item_cards-author_category_component__link" rel="nofollow" data-turbo="false" > reverietech </a> in <a href="/category/css/animations-and-effects" class="shared-item_cards-author_category_component__link" > Animations And Effects </a> </div> </div> <div class="shared-item_cards-list-image_card_component__attrsWrapper"> <ul> <li class="shared-item_cards-attributes_component__attribute"> <span class="shared-item_cards-attributes_component__label">Software Version: </span> <span class="shared-item_cards-attributes_component__value">CSS 3</span> </li> </ul> <div class="shared-item_cards-included_files_component__root"> File Types Included: <ul> <li class="shared-item_cards-included_files_component__fileType">HTML</li> <li class="shared-item_cards-included_files_component__fileType">CSS</li> </ul> </div> </div> </div> <div class="shared-item_cards-list-image_card_component__priceWrapper"> <div class="shared-item_cards-list-image_card_component__info"> <div class="shared-item_cards-list-image_card_component__favAndCollections"> <a href="/my/bookmarks/new?item_id=19326566" class="shared-item_cards-collection_button_component__collection" role="button" aria-label="Add to collection" title="Add to collection" rel="nofollow" data-controller="collection-button" data-action="collection-button#open" data-bookmark-button-target="bookmarkButton" data-item-id="19326566" > <span class="shared-item_cards-collection_button_component__icon"> <svg width='100%' height='100%'> <use xlink:href='/storefront/assets/icon_spritesheet-2c8173174a30370958101e9b5e0dc4a0503c16573b4e2c0961245849681b052e.svg#collection'></use> </svg> </span> </a> <span class="shared-item_cards-list-image_card_component__buttonSeparator"></span> <form method="post" action="/my/favorites/19326566" data-controller="favorite-button" data-action="submit->favorite-button#submit favoritesStoreUpdated@window->favorite-button#updateFromStore"> <input type="hidden" name="_method" value="post" data-favorite-button-target="formMethod"> <button type="submit" aria-label="Add to Favorites" class="shared-item_cards-favorite_button_component__favoriteButton" data-favorite-button-target="favoriteButton" data-favorited="false" data-item-id="19326566"> <svg width='100%' height='100%'> <use xlink:href='/storefront/assets/icon_spritesheet-2c8173174a30370958101e9b5e0dc4a0503c16573b4e2c0961245849681b052e.svg#heart'></use> </svg> </button> </form> </div> <div class="shared-item_cards-price_component__root"> $5 </div> <div class="shared-item_cards-list-image_card_component__ratingWrapper"></div> <div class="shared-item_cards-sales_component__root"> 71 Sales </div> <div class="shared-item_cards-list-image_card_component__lastUpdated shared-item_cards-list-image_card_component__tinyText"> Last updated: 21 Jan 17 </div> </div> <div class="shared-item_cards-list-image_card_component__coverWrapper"> <a class="shared-item_cards-add_to_cart_button_component__root shared-item_cards-add_to_cart_button_component__compact" role="button" title="Add to cart" aria-label="Add to cart" href="/cart/configure_before_adding/19326566" rel="nofollow" data-controller="cart-button modal-commander add-to-cart-event" data-action="click->modal-commander#open cartStoreUpdated@window->cart-button#updateFromStore click->add-to-cart-event#sendEvent" data-modal-commander-url-value="/my/cart_entries?item_id=19326566" data-modal-commander-method-value="POST" data-cart-button-item-id-value="19326566" data-cart-button-in-cart-class="shared-item_cards-add_to_cart_button_component__inCart" data-analytics-cart-button-payload="{"eventName":"add_to_cart","eventType":"user","quantityUpdate":false,"ecommerce":{"currency":"USD","value":"5.00","items":[{"affiliation":"codecanyon","itemId":19326566,"itemName":"Flutter - CSS Image Hover Effects \u0026 Lightbox","itemBrand":"reverietech","itemCategory":"css","itemCategory2":"animations-and-effects","itemCategory3":null,"price":"5.00","quantity":1}]}}" > <span class="shared-item_cards-add_to_cart_button_component__cartIcon"> <svg width='100%' height='100%'> <use xlink:href='/storefront/assets/icon_spritesheet-2c8173174a30370958101e9b5e0dc4a0503c16573b4e2c0961245849681b052e.svg#cart'></use> </svg> </span> </a> <a href="https://codecanyon.net/item/flutter-css-image-hover-effects-lightbox/full_screen_preview/19326566" class="shared-item_cards-preview_button_with_analytics_component__root" target="_blank" rel="noopener" > Live Preview </a> </div> </div> </div> </div> </div> <div class="shared-item_cards-card_component__root"> <div class="shared-item_cards-list-image_card_component__root" data-favorites-loader-target="item" data-item-id="6896127" data-price="4.00" data-site="codecanyon" > <div class="shared-item_cards-list-image_card_component__contentWrapper shared-item_cards-list-image_card_component__landscapeImage"> <a class="shared-item_cards-list-image_card_component__itemLinkOverlay" href="https://codecanyon.net/item/pure-css3-gallery/6896127" title="Pure CSS3 Gallery" aria-label="View Pure CSS3 Gallery" data-turbo="false" data-analytics-click-payload="{"eventName":"select_item","eventType":"user","ecommerce":{"currency":"USD","items":[{"affiliation":"codecanyon","itemId":6896127,"itemName":"Pure CSS3 Gallery","itemBrand":"luca8link","itemCategory":"css","itemCategory2":"animations-and-effects","itemCategory3":null,"price":"4.00","quantity":1}]}}"></a> <div class="shared-item_cards-list-image_card_component__imageWrapper"> <div class="shared-item_cards-preview_image_component__carousel shared-item_cards-preview_image_component__singleImage" style="padding-bottom: 50.847457627118644%" > <a class="shared-item_cards-preview_image_component__imageLink" data-turbo="false" data-analytics-click-payload="{"eventName":"select_item","eventType":"user","ecommerce":{"currency":"USD","items":[{"affiliation":"codecanyon","itemId":6896127,"itemName":"Pure CSS3 Gallery","itemBrand":"luca8link","itemCategory":"css","itemCategory2":"animations-and-effects","itemCategory3":null,"price":"4.00","quantity":1}]}}" href="https://codecanyon.net/item/pure-css3-gallery/6896127"> <img src="https://market-resized.envatousercontent.com/previews/files/81681644/promo_cssgallery.jpg?w=590&h=300&cf_fit=crop&crop=top&format=auto&q=85&s=8e29bdc7fe97dd3d476f672b953dfe969fdb01714e5ce2142e65fea160e1bb94" loading="lazy" style="left: 0%" class="shared-item_cards-preview_image_component__image" alt="Pure CSS3 Gallery" title="Pure CSS3 Gallery" width="590" height="300" data-controller="image-preview" data-action="error->image-preview#setFallback" data-fallback="https://previews.customer.envatousercontent.com/files/81681644/promo_cssgallery.jpg" data-carousel-target="image" /> </a></div> <div class="shared-item_cards-list-image_card_component__gradient" style="padding-top: 50.847457627118644%;"> <div class="shared-item_cards-list-image_card_component__buttons"> <a href="/my/bookmarks/new?item_id=6896127" class="shared-item_cards-collection_button_component__collection" role="button" aria-label="Add to collection" title="Add to collection" rel="nofollow" data-controller="collection-button" data-action="collection-button#open" data-bookmark-button-target="bookmarkButton" data-item-id="6896127" > <span class="shared-item_cards-collection_button_component__icon"> <svg width='100%' height='100%'> <use xlink:href='/storefront/assets/icon_spritesheet-2c8173174a30370958101e9b5e0dc4a0503c16573b4e2c0961245849681b052e.svg#collection'></use> </svg> </span> </a> <span class="shared-item_cards-list-image_card_component__buttonSeparator"></span> <form method="post" action="/my/favorites/6896127" data-controller="favorite-button" data-action="submit->favorite-button#submit favoritesStoreUpdated@window->favorite-button#updateFromStore"> <input type="hidden" name="_method" value="post" data-favorite-button-target="formMethod"> <button type="submit" aria-label="Add to Favorites" class="shared-item_cards-favorite_button_component__favoriteButton" data-favorite-button-target="favoriteButton" data-favorited="false" data-item-id="6896127"> <svg width='100%' height='100%'> <use xlink:href='/storefront/assets/icon_spritesheet-2c8173174a30370958101e9b5e0dc4a0503c16573b4e2c0961245849681b052e.svg#heart'></use> </svg> </button> </form> </div> </div> </div> <div class="shared-item_cards-list-image_card_component__detailsWrapper"> <h3 class="shared-item_cards-item_name_component__root"> <a class="shared-item_cards-item_name_component__itemNameLink" tabindex="0" data-turbo="false" data-analytics-click-payload="{"eventName":"select_item","eventType":"user","ecommerce":{"currency":"USD","items":[{"affiliation":"codecanyon","itemId":6896127,"itemName":"Pure CSS3 Gallery","itemBrand":"luca8link","itemCategory":"css","itemCategory2":"animations-and-effects","itemCategory3":null,"price":"4.00","quantity":1}]}}" href="https://codecanyon.net/item/pure-css3-gallery/6896127">Pure CSS3 Gallery</a> </h3> <div> <div class="shared-item_cards-author_category_component__root"> <i>by</i> <a href="https://codecanyon.net/user/luca8link" class="shared-item_cards-author_category_component__link" rel="nofollow" data-turbo="false" > luca8link </a> in <a href="/category/css/animations-and-effects" class="shared-item_cards-author_category_component__link" > Animations And Effects </a> </div> </div> <div class="shared-item_cards-list-image_card_component__attrsWrapper"> <ul> <li class="shared-item_cards-attributes_component__attribute"> <span class="shared-item_cards-attributes_component__label">Software Version: </span> <span class="shared-item_cards-attributes_component__value">CSS 3</span> </li> </ul> <div class="shared-item_cards-included_files_component__root"> File Types Included: <ul> <li class="shared-item_cards-included_files_component__fileType">HTML</li> <li class="shared-item_cards-included_files_component__fileType">CSS</li> </ul> </div> </div> </div> <div class="shared-item_cards-list-image_card_component__priceWrapper"> <div class="shared-item_cards-list-image_card_component__info"> <div class="shared-item_cards-list-image_card_component__favAndCollections"> <a href="/my/bookmarks/new?item_id=6896127" class="shared-item_cards-collection_button_component__collection" role="button" aria-label="Add to collection" title="Add to collection" rel="nofollow" data-controller="collection-button" data-action="collection-button#open" data-bookmark-button-target="bookmarkButton" data-item-id="6896127" > <span class="shared-item_cards-collection_button_component__icon"> <svg width='100%' height='100%'> <use xlink:href='/storefront/assets/icon_spritesheet-2c8173174a30370958101e9b5e0dc4a0503c16573b4e2c0961245849681b052e.svg#collection'></use> </svg> </span> </a> <span class="shared-item_cards-list-image_card_component__buttonSeparator"></span> <form method="post" action="/my/favorites/6896127" data-controller="favorite-button" data-action="submit->favorite-button#submit favoritesStoreUpdated@window->favorite-button#updateFromStore"> <input type="hidden" name="_method" value="post" data-favorite-button-target="formMethod"> <button type="submit" aria-label="Add to Favorites" class="shared-item_cards-favorite_button_component__favoriteButton" data-favorite-button-target="favoriteButton" data-favorited="false" data-item-id="6896127"> <svg width='100%' height='100%'> <use xlink:href='/storefront/assets/icon_spritesheet-2c8173174a30370958101e9b5e0dc4a0503c16573b4e2c0961245849681b052e.svg#heart'></use> </svg> </button> </form> </div> <div class="shared-item_cards-price_component__root"> $4 </div> <div class="shared-item_cards-list-image_card_component__ratingWrapper"></div> <div class="shared-item_cards-sales_component__root"> 65 Sales </div> <div class="shared-item_cards-list-image_card_component__lastUpdated shared-item_cards-list-image_card_component__tinyText"> Last updated: 07 Jul 14 </div> </div> <div class="shared-item_cards-list-image_card_component__coverWrapper"> <a class="shared-item_cards-add_to_cart_button_component__root shared-item_cards-add_to_cart_button_component__compact" role="button" title="Add to cart" aria-label="Add to cart" href="/cart/configure_before_adding/6896127" rel="nofollow" data-controller="cart-button modal-commander add-to-cart-event" data-action="click->modal-commander#open cartStoreUpdated@window->cart-button#updateFromStore click->add-to-cart-event#sendEvent" data-modal-commander-url-value="/my/cart_entries?item_id=6896127" data-modal-commander-method-value="POST" data-cart-button-item-id-value="6896127" data-cart-button-in-cart-class="shared-item_cards-add_to_cart_button_component__inCart" data-analytics-cart-button-payload="{"eventName":"add_to_cart","eventType":"user","quantityUpdate":false,"ecommerce":{"currency":"USD","value":"4.00","items":[{"affiliation":"codecanyon","itemId":6896127,"itemName":"Pure CSS3 Gallery","itemBrand":"luca8link","itemCategory":"css","itemCategory2":"animations-and-effects","itemCategory3":null,"price":"4.00","quantity":1}]}}" > <span class="shared-item_cards-add_to_cart_button_component__cartIcon"> <svg width='100%' height='100%'> <use xlink:href='/storefront/assets/icon_spritesheet-2c8173174a30370958101e9b5e0dc4a0503c16573b4e2c0961245849681b052e.svg#cart'></use> </svg> </span> </a> <a href="https://codecanyon.net/item/pure-css3-gallery/full_screen_preview/6896127" class="shared-item_cards-preview_button_with_analytics_component__root" target="_blank" rel="noopener" > Live Preview </a> </div> </div> </div> </div> </div> <div class="shared-item_cards-card_component__root"> <div class="shared-item_cards-list-image_card_component__root" data-favorites-loader-target="item" data-item-id="7067192" data-price="3.00" data-site="codecanyon" > <div class="shared-item_cards-list-image_card_component__contentWrapper shared-item_cards-list-image_card_component__landscapeImage"> <a class="shared-item_cards-list-image_card_component__itemLinkOverlay" href="https://codecanyon.net/item/portfolio-wall-html-css/7067192" title="Portfolio Wall | html - css" aria-label="View Portfolio Wall | html - css" data-turbo="false" data-analytics-click-payload="{"eventName":"select_item","eventType":"user","ecommerce":{"currency":"USD","items":[{"affiliation":"codecanyon","itemId":7067192,"itemName":"Portfolio Wall | html - css","itemBrand":"AmrMeRo","itemCategory":"css","itemCategory2":"animations-and-effects","itemCategory3":null,"price":"3.00","quantity":1}]}}"></a> <div class="shared-item_cards-list-image_card_component__imageWrapper"> <div class="shared-item_cards-preview_image_component__carousel shared-item_cards-preview_image_component__singleImage" style="padding-bottom: 50.847457627118644%" > <a class="shared-item_cards-preview_image_component__imageLink" data-turbo="false" data-analytics-click-payload="{"eventName":"select_item","eventType":"user","ecommerce":{"currency":"USD","items":[{"affiliation":"codecanyon","itemId":7067192,"itemName":"Portfolio Wall | html - css","itemBrand":"AmrMeRo","itemCategory":"css","itemCategory2":"animations-and-effects","itemCategory3":null,"price":"3.00","quantity":1}]}}" href="https://codecanyon.net/item/portfolio-wall-html-css/7067192"> <img src="https://market-resized.envatousercontent.com/previews/files/83979293/preview.jpg?w=590&h=300&cf_fit=crop&crop=top&format=auto&q=85&s=627418c5f8d2fe0be23a34e569c26f77ef14be08eea779ebfec9308334fd5156" loading="lazy" style="left: 0%" class="shared-item_cards-preview_image_component__image" alt="Portfolio Wall | html - css" title="Portfolio Wall | html - css" width="590" height="300" data-controller="image-preview" data-action="error->image-preview#setFallback" data-fallback="https://previews.customer.envatousercontent.com/files/83979293/preview.jpg" data-carousel-target="image" /> </a></div> <div class="shared-item_cards-list-image_card_component__gradient" style="padding-top: 50.847457627118644%;"> <div class="shared-item_cards-list-image_card_component__buttons"> <a href="/my/bookmarks/new?item_id=7067192" class="shared-item_cards-collection_button_component__collection" role="button" aria-label="Add to collection" title="Add to collection" rel="nofollow" data-controller="collection-button" data-action="collection-button#open" data-bookmark-button-target="bookmarkButton" data-item-id="7067192" > <span class="shared-item_cards-collection_button_component__icon"> <svg width='100%' height='100%'> <use xlink:href='/storefront/assets/icon_spritesheet-2c8173174a30370958101e9b5e0dc4a0503c16573b4e2c0961245849681b052e.svg#collection'></use> </svg> </span> </a> <span class="shared-item_cards-list-image_card_component__buttonSeparator"></span> <form method="post" action="/my/favorites/7067192" data-controller="favorite-button" data-action="submit->favorite-button#submit favoritesStoreUpdated@window->favorite-button#updateFromStore"> <input type="hidden" name="_method" value="post" data-favorite-button-target="formMethod"> <button type="submit" aria-label="Add to Favorites" class="shared-item_cards-favorite_button_component__favoriteButton" data-favorite-button-target="favoriteButton" data-favorited="false" data-item-id="7067192"> <svg width='100%' height='100%'> <use xlink:href='/storefront/assets/icon_spritesheet-2c8173174a30370958101e9b5e0dc4a0503c16573b4e2c0961245849681b052e.svg#heart'></use> </svg> </button> </form> </div> </div> </div> <div class="shared-item_cards-list-image_card_component__detailsWrapper"> <h3 class="shared-item_cards-item_name_component__root"> <a class="shared-item_cards-item_name_component__itemNameLink" tabindex="0" data-turbo="false" data-analytics-click-payload="{"eventName":"select_item","eventType":"user","ecommerce":{"currency":"USD","items":[{"affiliation":"codecanyon","itemId":7067192,"itemName":"Portfolio Wall | html - css","itemBrand":"AmrMeRo","itemCategory":"css","itemCategory2":"animations-and-effects","itemCategory3":null,"price":"3.00","quantity":1}]}}" href="https://codecanyon.net/item/portfolio-wall-html-css/7067192">Portfolio Wall | html - css</a> </h3> <div> <div class="shared-item_cards-author_category_component__root"> <i>by</i> <a href="https://codecanyon.net/user/amrmero" class="shared-item_cards-author_category_component__link" rel="nofollow" data-turbo="false" > AmrMeRo </a> in <a href="/category/css/animations-and-effects" class="shared-item_cards-author_category_component__link" > Animations And Effects </a> </div> </div> <div class="shared-item_cards-list-image_card_component__attrsWrapper"> <ul> <li class="shared-item_cards-attributes_component__attribute"> <span class="shared-item_cards-attributes_component__label">Software Version: </span> <span class="shared-item_cards-attributes_component__value">CSS 2 - 3</span> </li> </ul> <div class="shared-item_cards-included_files_component__root"> File Types Included: <ul> <li class="shared-item_cards-included_files_component__fileType">HTML</li> <li class="shared-item_cards-included_files_component__fileType">CSS</li> </ul> </div> </div> </div> <div class="shared-item_cards-list-image_card_component__priceWrapper"> <div class="shared-item_cards-list-image_card_component__info"> <div class="shared-item_cards-list-image_card_component__favAndCollections"> <a href="/my/bookmarks/new?item_id=7067192" class="shared-item_cards-collection_button_component__collection" role="button" aria-label="Add to collection" title="Add to collection" rel="nofollow" data-controller="collection-button" data-action="collection-button#open" data-bookmark-button-target="bookmarkButton" data-item-id="7067192" > <span class="shared-item_cards-collection_button_component__icon"> <svg width='100%' height='100%'> <use xlink:href='/storefront/assets/icon_spritesheet-2c8173174a30370958101e9b5e0dc4a0503c16573b4e2c0961245849681b052e.svg#collection'></use> </svg> </span> </a> <span class="shared-item_cards-list-image_card_component__buttonSeparator"></span> <form method="post" action="/my/favorites/7067192" data-controller="favorite-button" data-action="submit->favorite-button#submit favoritesStoreUpdated@window->favorite-button#updateFromStore"> <input type="hidden" name="_method" value="post" data-favorite-button-target="formMethod"> <button type="submit" aria-label="Add to Favorites" class="shared-item_cards-favorite_button_component__favoriteButton" data-favorite-button-target="favoriteButton" data-favorited="false" data-item-id="7067192"> <svg width='100%' height='100%'> <use xlink:href='/storefront/assets/icon_spritesheet-2c8173174a30370958101e9b5e0dc4a0503c16573b4e2c0961245849681b052e.svg#heart'></use> </svg> </button> </form> </div> <div class="shared-item_cards-price_component__root"> $3 </div> <div class="shared-item_cards-list-image_card_component__ratingWrapper"><div class="shared-stars_rating_component__root"> <div class="shared-stars_rating_component__starRating" role="img" aria-label="Rated 3.75 out of 5, 4 reviews" > <span class="shared-stars_rating_component__star"> <svg width='100%' height='100%'> <use xlink:href='/storefront/assets/icon_spritesheet-2c8173174a30370958101e9b5e0dc4a0503c16573b4e2c0961245849681b052e.svg#stars_4.0'></use> </svg> </span> </div> <span aria-hidden="true" class="shared-stars_rating_component__starRatingCount">(4)</span> </div> </div> <div class="shared-item_cards-sales_component__root"> 65 Sales </div> <div class="shared-item_cards-list-image_card_component__lastUpdated shared-item_cards-list-image_card_component__tinyText"> Last updated: 10 Mar 14 </div> </div> <div class="shared-item_cards-list-image_card_component__coverWrapper"> <a class="shared-item_cards-add_to_cart_button_component__root shared-item_cards-add_to_cart_button_component__compact" role="button" title="Add to cart" aria-label="Add to cart" href="/cart/configure_before_adding/7067192" rel="nofollow" data-controller="cart-button modal-commander add-to-cart-event" data-action="click->modal-commander#open cartStoreUpdated@window->cart-button#updateFromStore click->add-to-cart-event#sendEvent" data-modal-commander-url-value="/my/cart_entries?item_id=7067192" data-modal-commander-method-value="POST" data-cart-button-item-id-value="7067192" data-cart-button-in-cart-class="shared-item_cards-add_to_cart_button_component__inCart" data-analytics-cart-button-payload="{"eventName":"add_to_cart","eventType":"user","quantityUpdate":false,"ecommerce":{"currency":"USD","value":"3.00","items":[{"affiliation":"codecanyon","itemId":7067192,"itemName":"Portfolio Wall | html - css","itemBrand":"AmrMeRo","itemCategory":"css","itemCategory2":"animations-and-effects","itemCategory3":null,"price":"3.00","quantity":1}]}}" > <span class="shared-item_cards-add_to_cart_button_component__cartIcon"> <svg width='100%' height='100%'> <use xlink:href='/storefront/assets/icon_spritesheet-2c8173174a30370958101e9b5e0dc4a0503c16573b4e2c0961245849681b052e.svg#cart'></use> </svg> </span> </a> <a href="https://codecanyon.net/item/portfolio-wall-html-css/full_screen_preview/7067192" class="shared-item_cards-preview_button_with_analytics_component__root" target="_blank" rel="noopener" > Live Preview </a> </div> </div> </div> </div> </div> <div class="shared-item_cards-card_component__root"> <div class="shared-item_cards-list-image_card_component__root" data-favorites-loader-target="item" data-item-id="13403668" data-price="9.00" data-site="codecanyon" > <div class="shared-item_cards-list-image_card_component__contentWrapper shared-item_cards-list-image_card_component__landscapeImage"> <a class="shared-item_cards-list-image_card_component__itemLinkOverlay" href="https://codecanyon.net/item/viavi-css3-hover-effects/13403668" title="Viavi CSS3 Hover Effects" aria-label="View Viavi CSS3 Hover Effects" data-turbo="false" data-analytics-click-payload="{"eventName":"select_item","eventType":"user","ecommerce":{"currency":"USD","items":[{"affiliation":"codecanyon","itemId":13403668,"itemName":"Viavi CSS3 Hover Effects","itemBrand":"viaviwebtech","itemCategory":"css","itemCategory2":"animations-and-effects","itemCategory3":null,"price":"9.00","quantity":1}]}}"></a> <div class="shared-item_cards-list-image_card_component__imageWrapper"> <div class="shared-item_cards-preview_image_component__carousel shared-item_cards-preview_image_component__singleImage" style="padding-bottom: 50.847457627118644%" > <a class="shared-item_cards-preview_image_component__imageLink" data-turbo="false" data-analytics-click-payload="{"eventName":"select_item","eventType":"user","ecommerce":{"currency":"USD","items":[{"affiliation":"codecanyon","itemId":13403668,"itemName":"Viavi CSS3 Hover Effects","itemBrand":"viaviwebtech","itemCategory":"css","itemCategory2":"animations-and-effects","itemCategory3":null,"price":"9.00","quantity":1}]}}" href="https://codecanyon.net/item/viavi-css3-hover-effects/13403668"> <img src="https://market-resized.envatousercontent.com/previews/files/155177950/CSS_Hover-Effects_Banner.jpg?w=590&h=300&cf_fit=crop&crop=top&format=auto&q=85&s=dbf5ba325dc75633296395260ba5fbbdd49d0fe0e6d42d3a925f2c373f21f811" loading="lazy" style="left: 0%" class="shared-item_cards-preview_image_component__image" alt="Viavi CSS3 Hover Effects" title="Viavi CSS3 Hover Effects" width="590" height="300" data-controller="image-preview" data-action="error->image-preview#setFallback" data-fallback="https://previews.customer.envatousercontent.com/files/155177950/CSS_Hover-Effects_Banner.jpg" data-carousel-target="image" /> </a></div> <div class="shared-item_cards-list-image_card_component__gradient" style="padding-top: 50.847457627118644%;"> <div class="shared-item_cards-list-image_card_component__buttons"> <a href="/my/bookmarks/new?item_id=13403668" class="shared-item_cards-collection_button_component__collection" role="button" aria-label="Add to collection" title="Add to collection" rel="nofollow" data-controller="collection-button" data-action="collection-button#open" data-bookmark-button-target="bookmarkButton" data-item-id="13403668" > <span class="shared-item_cards-collection_button_component__icon"> <svg width='100%' height='100%'> <use xlink:href='/storefront/assets/icon_spritesheet-2c8173174a30370958101e9b5e0dc4a0503c16573b4e2c0961245849681b052e.svg#collection'></use> </svg> </span> </a> <span class="shared-item_cards-list-image_card_component__buttonSeparator"></span> <form method="post" action="/my/favorites/13403668" data-controller="favorite-button" data-action="submit->favorite-button#submit favoritesStoreUpdated@window->favorite-button#updateFromStore"> <input type="hidden" name="_method" value="post" data-favorite-button-target="formMethod"> <button type="submit" aria-label="Add to Favorites" class="shared-item_cards-favorite_button_component__favoriteButton" data-favorite-button-target="favoriteButton" data-favorited="false" data-item-id="13403668"> <svg width='100%' height='100%'> <use xlink:href='/storefront/assets/icon_spritesheet-2c8173174a30370958101e9b5e0dc4a0503c16573b4e2c0961245849681b052e.svg#heart'></use> </svg> </button> </form> </div> </div> </div> <div class="shared-item_cards-list-image_card_component__detailsWrapper"> <h3 class="shared-item_cards-item_name_component__root"> <a class="shared-item_cards-item_name_component__itemNameLink" tabindex="0" data-turbo="false" data-analytics-click-payload="{"eventName":"select_item","eventType":"user","ecommerce":{"currency":"USD","items":[{"affiliation":"codecanyon","itemId":13403668,"itemName":"Viavi CSS3 Hover Effects","itemBrand":"viaviwebtech","itemCategory":"css","itemCategory2":"animations-and-effects","itemCategory3":null,"price":"9.00","quantity":1}]}}" href="https://codecanyon.net/item/viavi-css3-hover-effects/13403668">Viavi CSS3 Hover Effects</a> </h3> <div> <div class="shared-item_cards-author_category_component__root"> <i>by</i> <a href="https://codecanyon.net/user/viaviwebtech" class="shared-item_cards-author_category_component__link" rel="nofollow" data-turbo="false" > viaviwebtech </a> in <a href="/category/css/animations-and-effects" class="shared-item_cards-author_category_component__link" > Animations And Effects </a> </div> </div> <div class="shared-item_cards-list-image_card_component__attrsWrapper"> <ul> <li class="shared-item_cards-attributes_component__attribute"> <span class="shared-item_cards-attributes_component__label">Software Version: </span> <span class="shared-item_cards-attributes_component__value">CSS 3</span> </li> </ul> <div class="shared-item_cards-included_files_component__root"> File Types Included: <ul> <li class="shared-item_cards-included_files_component__fileType">JavaScript JS</li> <li class="shared-item_cards-included_files_component__fileType">HTML</li> <li class="shared-item_cards-included_files_component__fileType">CSS</li> <li class="shared-item_cards-included_files_component__fileType">LESS</li> </ul> </div> </div> </div> <div class="shared-item_cards-list-image_card_component__priceWrapper"> <div class="shared-item_cards-list-image_card_component__info"> <div class="shared-item_cards-list-image_card_component__favAndCollections"> <a href="/my/bookmarks/new?item_id=13403668" class="shared-item_cards-collection_button_component__collection" role="button" aria-label="Add to collection" title="Add to collection" rel="nofollow" data-controller="collection-button" data-action="collection-button#open" data-bookmark-button-target="bookmarkButton" data-item-id="13403668" > <span class="shared-item_cards-collection_button_component__icon"> <svg width='100%' height='100%'> <use xlink:href='/storefront/assets/icon_spritesheet-2c8173174a30370958101e9b5e0dc4a0503c16573b4e2c0961245849681b052e.svg#collection'></use> </svg> </span> </a> <span class="shared-item_cards-list-image_card_component__buttonSeparator"></span> <form method="post" action="/my/favorites/13403668" data-controller="favorite-button" data-action="submit->favorite-button#submit favoritesStoreUpdated@window->favorite-button#updateFromStore"> <input type="hidden" name="_method" value="post" data-favorite-button-target="formMethod"> <button type="submit" aria-label="Add to Favorites" class="shared-item_cards-favorite_button_component__favoriteButton" data-favorite-button-target="favoriteButton" data-favorited="false" data-item-id="13403668"> <svg width='100%' height='100%'> <use xlink:href='/storefront/assets/icon_spritesheet-2c8173174a30370958101e9b5e0dc4a0503c16573b4e2c0961245849681b052e.svg#heart'></use> </svg> </button> </form> </div> <div class="shared-item_cards-price_component__root"> $9 </div> <div class="shared-item_cards-list-image_card_component__ratingWrapper"></div> <div class="shared-item_cards-sales_component__root"> 57 Sales </div> <div class="shared-item_cards-list-image_card_component__lastUpdated shared-item_cards-list-image_card_component__tinyText"> Last updated: 28 Oct 15 </div> </div> <div class="shared-item_cards-list-image_card_component__coverWrapper"> <a class="shared-item_cards-add_to_cart_button_component__root shared-item_cards-add_to_cart_button_component__compact" role="button" title="Add to cart" aria-label="Add to cart" href="/cart/configure_before_adding/13403668" rel="nofollow" data-controller="cart-button modal-commander add-to-cart-event" data-action="click->modal-commander#open cartStoreUpdated@window->cart-button#updateFromStore click->add-to-cart-event#sendEvent" data-modal-commander-url-value="/my/cart_entries?item_id=13403668" data-modal-commander-method-value="POST" data-cart-button-item-id-value="13403668" data-cart-button-in-cart-class="shared-item_cards-add_to_cart_button_component__inCart" data-analytics-cart-button-payload="{"eventName":"add_to_cart","eventType":"user","quantityUpdate":false,"ecommerce":{"currency":"USD","value":"9.00","items":[{"affiliation":"codecanyon","itemId":13403668,"itemName":"Viavi CSS3 Hover Effects","itemBrand":"viaviwebtech","itemCategory":"css","itemCategory2":"animations-and-effects","itemCategory3":null,"price":"9.00","quantity":1}]}}" > <span class="shared-item_cards-add_to_cart_button_component__cartIcon"> <svg width='100%' height='100%'> <use xlink:href='/storefront/assets/icon_spritesheet-2c8173174a30370958101e9b5e0dc4a0503c16573b4e2c0961245849681b052e.svg#cart'></use> </svg> </span> </a> <a href="https://codecanyon.net/item/viavi-css3-hover-effects/full_screen_preview/13403668" class="shared-item_cards-preview_button_with_analytics_component__root" target="_blank" rel="noopener" > Live Preview </a> </div> </div> </div> </div> </div> <div class="shared-item_cards-card_component__root"> <div class="shared-item_cards-list-image_card_component__root" data-favorites-loader-target="item" data-item-id="10688406" data-price="5.00" data-site="codecanyon" > <div class="shared-item_cards-list-image_card_component__contentWrapper shared-item_cards-list-image_card_component__landscapeImage"> <a class="shared-item_cards-list-image_card_component__itemLinkOverlay" href="https://codecanyon.net/item/vspreloader-ultimate-css-animated-preloaders/10688406" title="VSPreloader - Ultimate CSS Animated Preloaders" aria-label="View VSPreloader - Ultimate CSS Animated Preloaders" data-turbo="false" data-analytics-click-payload="{"eventName":"select_item","eventType":"user","ecommerce":{"currency":"USD","items":[{"affiliation":"codecanyon","itemId":10688406,"itemName":"VSPreloader - Ultimate CSS Animated Preloaders","itemBrand":"vsart","itemCategory":"css","itemCategory2":"animations-and-effects","itemCategory3":null,"price":"5.00","quantity":1}]}}"></a> <div class="shared-item_cards-list-image_card_component__imageWrapper"> <div class="shared-item_cards-preview_image_component__carousel shared-item_cards-preview_image_component__singleImage" style="padding-bottom: 50.847457627118644%" > <a class="shared-item_cards-preview_image_component__imageLink" data-turbo="false" data-analytics-click-payload="{"eventName":"select_item","eventType":"user","ecommerce":{"currency":"USD","items":[{"affiliation":"codecanyon","itemId":10688406,"itemName":"VSPreloader - Ultimate CSS Animated Preloaders","itemBrand":"vsart","itemCategory":"css","itemCategory2":"animations-and-effects","itemCategory3":null,"price":"5.00","quantity":1}]}}" href="https://codecanyon.net/item/vspreloader-ultimate-css-animated-preloaders/10688406"> <img src="https://market-resized.envatousercontent.com/previews/files/125445647/preview.jpg?w=590&h=300&cf_fit=crop&crop=top&format=auto&q=85&s=0c1d7cb1fa319939ec99aa18268b266196584f9c52f51b344d44609ca1c62d52" loading="lazy" style="left: 0%" class="shared-item_cards-preview_image_component__image" alt="VSPreloader - Ultimate CSS Animated Preloaders" title="VSPreloader - Ultimate CSS Animated Preloaders" width="590" height="300" data-controller="image-preview" data-action="error->image-preview#setFallback" data-fallback="https://previews.customer.envatousercontent.com/files/125445647/preview.jpg" data-carousel-target="image" /> </a></div> <div class="shared-item_cards-list-image_card_component__gradient" style="padding-top: 50.847457627118644%;"> <div class="shared-item_cards-list-image_card_component__buttons"> <a href="/my/bookmarks/new?item_id=10688406" class="shared-item_cards-collection_button_component__collection" role="button" aria-label="Add to collection" title="Add to collection" rel="nofollow" data-controller="collection-button" data-action="collection-button#open" data-bookmark-button-target="bookmarkButton" data-item-id="10688406" > <span class="shared-item_cards-collection_button_component__icon"> <svg width='100%' height='100%'> <use xlink:href='/storefront/assets/icon_spritesheet-2c8173174a30370958101e9b5e0dc4a0503c16573b4e2c0961245849681b052e.svg#collection'></use> </svg> </span> </a> <span class="shared-item_cards-list-image_card_component__buttonSeparator"></span> <form method="post" action="/my/favorites/10688406" data-controller="favorite-button" data-action="submit->favorite-button#submit favoritesStoreUpdated@window->favorite-button#updateFromStore"> <input type="hidden" name="_method" value="post" data-favorite-button-target="formMethod"> <button type="submit" aria-label="Add to Favorites" class="shared-item_cards-favorite_button_component__favoriteButton" data-favorite-button-target="favoriteButton" data-favorited="false" data-item-id="10688406"> <svg width='100%' height='100%'> <use xlink:href='/storefront/assets/icon_spritesheet-2c8173174a30370958101e9b5e0dc4a0503c16573b4e2c0961245849681b052e.svg#heart'></use> </svg> </button> </form> </div> </div> </div> <div class="shared-item_cards-list-image_card_component__detailsWrapper"> <h3 class="shared-item_cards-item_name_component__root"> <a class="shared-item_cards-item_name_component__itemNameLink" tabindex="0" data-turbo="false" data-analytics-click-payload="{"eventName":"select_item","eventType":"user","ecommerce":{"currency":"USD","items":[{"affiliation":"codecanyon","itemId":10688406,"itemName":"VSPreloader - Ultimate CSS Animated Preloaders","itemBrand":"vsart","itemCategory":"css","itemCategory2":"animations-and-effects","itemCategory3":null,"price":"5.00","quantity":1}]}}" href="https://codecanyon.net/item/vspreloader-ultimate-css-animated-preloaders/10688406">VSPreloader - Ultimate CSS Animated Preloaders</a> </h3> <div> <div class="shared-item_cards-author_category_component__root"> <i>by</i> <a href="https://codecanyon.net/user/vsart" class="shared-item_cards-author_category_component__link" rel="nofollow" data-turbo="false" > vsart </a> in <a href="/category/css/animations-and-effects" class="shared-item_cards-author_category_component__link" > Animations And Effects </a> </div> </div> <div class="shared-item_cards-list-image_card_component__attrsWrapper"> <ul> <li class="shared-item_cards-attributes_component__attribute"> <span class="shared-item_cards-attributes_component__label">Software Version: </span> <span class="shared-item_cards-attributes_component__value">CSS 3</span> </li> </ul> <div class="shared-item_cards-included_files_component__root"> File Types Included: <ul> <li class="shared-item_cards-included_files_component__fileType">JavaScript JS</li> <li class="shared-item_cards-included_files_component__fileType">HTML</li> <li class="shared-item_cards-included_files_component__fileType">CSS</li> <li class="shared-item_cards-included_files_component__fileType">LESS</li> </ul> </div> </div> </div> <div class="shared-item_cards-list-image_card_component__priceWrapper"> <div class="shared-item_cards-list-image_card_component__info"> <div class="shared-item_cards-list-image_card_component__favAndCollections"> <a href="/my/bookmarks/new?item_id=10688406" class="shared-item_cards-collection_button_component__collection" role="button" aria-label="Add to collection" title="Add to collection" rel="nofollow" data-controller="collection-button" data-action="collection-button#open" data-bookmark-button-target="bookmarkButton" data-item-id="10688406" > <span class="shared-item_cards-collection_button_component__icon"> <svg width='100%' height='100%'> <use xlink:href='/storefront/assets/icon_spritesheet-2c8173174a30370958101e9b5e0dc4a0503c16573b4e2c0961245849681b052e.svg#collection'></use> </svg> </span> </a> <span class="shared-item_cards-list-image_card_component__buttonSeparator"></span> <form method="post" action="/my/favorites/10688406" data-controller="favorite-button" data-action="submit->favorite-button#submit favoritesStoreUpdated@window->favorite-button#updateFromStore"> <input type="hidden" name="_method" value="post" data-favorite-button-target="formMethod"> <button type="submit" aria-label="Add to Favorites" class="shared-item_cards-favorite_button_component__favoriteButton" data-favorite-button-target="favoriteButton" data-favorited="false" data-item-id="10688406"> <svg width='100%' height='100%'> <use xlink:href='/storefront/assets/icon_spritesheet-2c8173174a30370958101e9b5e0dc4a0503c16573b4e2c0961245849681b052e.svg#heart'></use> </svg> </button> </form> </div> <div class="shared-item_cards-price_component__root"> $5 </div> <div class="shared-item_cards-list-image_card_component__ratingWrapper"><div class="shared-stars_rating_component__root"> <div class="shared-stars_rating_component__starRating" role="img" aria-label="Rated 5.0 out of 5, 3 reviews" > <span class="shared-stars_rating_component__star"> <svg width='100%' height='100%'> <use xlink:href='/storefront/assets/icon_spritesheet-2c8173174a30370958101e9b5e0dc4a0503c16573b4e2c0961245849681b052e.svg#stars_5.0'></use> </svg> </span> </div> <span aria-hidden="true" class="shared-stars_rating_component__starRatingCount">(3)</span> </div> </div> <div class="shared-item_cards-sales_component__root"> 56 Sales </div> <div class="shared-item_cards-list-image_card_component__lastUpdated shared-item_cards-list-image_card_component__tinyText"> Last updated: 11 Mar 15 </div> </div> <div class="shared-item_cards-list-image_card_component__coverWrapper"> <a class="shared-item_cards-add_to_cart_button_component__root shared-item_cards-add_to_cart_button_component__compact" role="button" title="Add to cart" aria-label="Add to cart" href="/cart/configure_before_adding/10688406" rel="nofollow" data-controller="cart-button modal-commander add-to-cart-event" data-action="click->modal-commander#open cartStoreUpdated@window->cart-button#updateFromStore click->add-to-cart-event#sendEvent" data-modal-commander-url-value="/my/cart_entries?item_id=10688406" data-modal-commander-method-value="POST" data-cart-button-item-id-value="10688406" data-cart-button-in-cart-class="shared-item_cards-add_to_cart_button_component__inCart" data-analytics-cart-button-payload="{"eventName":"add_to_cart","eventType":"user","quantityUpdate":false,"ecommerce":{"currency":"USD","value":"5.00","items":[{"affiliation":"codecanyon","itemId":10688406,"itemName":"VSPreloader - Ultimate CSS Animated Preloaders","itemBrand":"vsart","itemCategory":"css","itemCategory2":"animations-and-effects","itemCategory3":null,"price":"5.00","quantity":1}]}}" > <span class="shared-item_cards-add_to_cart_button_component__cartIcon"> <svg width='100%' height='100%'> <use xlink:href='/storefront/assets/icon_spritesheet-2c8173174a30370958101e9b5e0dc4a0503c16573b4e2c0961245849681b052e.svg#cart'></use> </svg> </span> </a> <a href="https://codecanyon.net/item/vspreloader-ultimate-css-animated-preloaders/full_screen_preview/10688406" class="shared-item_cards-preview_button_with_analytics_component__root" target="_blank" rel="noopener" > Live Preview </a> </div> </div> </div> </div> </div> <div class="shared-item_cards-card_component__root"> <div class="shared-item_cards-list-image_card_component__root" data-favorites-loader-target="item" data-item-id="21167030" data-price="8.00" data-site="codecanyon" > <div class="shared-item_cards-list-image_card_component__contentWrapper shared-item_cards-list-image_card_component__landscapeImage"> <a class="shared-item_cards-list-image_card_component__itemLinkOverlay" href="https://codecanyon.net/item/essential-image-hover-effects/21167030" title="Essential Image Hover Effects" aria-label="View Essential Image Hover Effects" data-turbo="false" data-analytics-click-payload="{"eventName":"select_item","eventType":"user","ecommerce":{"currency":"USD","items":[{"affiliation":"codecanyon","itemId":21167030,"itemName":"Essential Image Hover Effects","itemBrand":"thecodude","itemCategory":"css","itemCategory2":"animations-and-effects","itemCategory3":null,"price":"8.00","quantity":1}]}}"></a> <div class="shared-item_cards-list-image_card_component__imageWrapper"> <div class="shared-item_cards-preview_image_component__carousel shared-item_cards-preview_image_component__singleImage" style="padding-bottom: 50.847457627118644%" > <a class="shared-item_cards-preview_image_component__imageLink" data-turbo="false" data-analytics-click-payload="{"eventName":"select_item","eventType":"user","ecommerce":{"currency":"USD","items":[{"affiliation":"codecanyon","itemId":21167030,"itemName":"Essential Image Hover Effects","itemBrand":"thecodude","itemCategory":"css","itemCategory2":"animations-and-effects","itemCategory3":null,"price":"8.00","quantity":1}]}}" href="https://codecanyon.net/item/essential-image-hover-effects/21167030"> <img src="https://market-resized.envatousercontent.com/previews/files/255726559/preview.jpg?w=590&h=300&cf_fit=crop&crop=top&format=auto&q=85&s=10f9944b83d04cc72e50f1031ae5a9be1410c59aa669043894b7f5869df7a68d" loading="lazy" style="left: 0%" class="shared-item_cards-preview_image_component__image" alt="Essential Image Hover Effects" title="Essential Image Hover Effects" width="590" height="300" data-controller="image-preview" data-action="error->image-preview#setFallback" data-fallback="https://previews.customer.envatousercontent.com/files/255726559/preview.jpg" data-carousel-target="image" /> </a></div> <div class="shared-item_cards-list-image_card_component__gradient" style="padding-top: 50.847457627118644%;"> <div class="shared-item_cards-list-image_card_component__buttons"> <a href="/my/bookmarks/new?item_id=21167030" class="shared-item_cards-collection_button_component__collection" role="button" aria-label="Add to collection" title="Add to collection" rel="nofollow" data-controller="collection-button" data-action="collection-button#open" data-bookmark-button-target="bookmarkButton" data-item-id="21167030" > <span class="shared-item_cards-collection_button_component__icon"> <svg width='100%' height='100%'> <use xlink:href='/storefront/assets/icon_spritesheet-2c8173174a30370958101e9b5e0dc4a0503c16573b4e2c0961245849681b052e.svg#collection'></use> </svg> </span> </a> <span class="shared-item_cards-list-image_card_component__buttonSeparator"></span> <form method="post" action="/my/favorites/21167030" data-controller="favorite-button" data-action="submit->favorite-button#submit favoritesStoreUpdated@window->favorite-button#updateFromStore"> <input type="hidden" name="_method" value="post" data-favorite-button-target="formMethod"> <button type="submit" aria-label="Add to Favorites" class="shared-item_cards-favorite_button_component__favoriteButton" data-favorite-button-target="favoriteButton" data-favorited="false" data-item-id="21167030"> <svg width='100%' height='100%'> <use xlink:href='/storefront/assets/icon_spritesheet-2c8173174a30370958101e9b5e0dc4a0503c16573b4e2c0961245849681b052e.svg#heart'></use> </svg> </button> </form> </div> </div> </div> <div class="shared-item_cards-list-image_card_component__detailsWrapper"> <h3 class="shared-item_cards-item_name_component__root"> <a class="shared-item_cards-item_name_component__itemNameLink" tabindex="0" data-turbo="false" data-analytics-click-payload="{"eventName":"select_item","eventType":"user","ecommerce":{"currency":"USD","items":[{"affiliation":"codecanyon","itemId":21167030,"itemName":"Essential Image Hover Effects","itemBrand":"thecodude","itemCategory":"css","itemCategory2":"animations-and-effects","itemCategory3":null,"price":"8.00","quantity":1}]}}" href="https://codecanyon.net/item/essential-image-hover-effects/21167030">Essential Image Hover Effects</a> </h3> <div> <div class="shared-item_cards-author_category_component__root"> <i>by</i> <a href="https://codecanyon.net/user/thecodude" class="shared-item_cards-author_category_component__link" rel="nofollow" data-turbo="false" > thecodude </a> in <a href="/category/css/animations-and-effects" class="shared-item_cards-author_category_component__link" > Animations And Effects </a> </div> </div> <div class="shared-item_cards-list-image_card_component__attrsWrapper"> <ul> <li class="shared-item_cards-attributes_component__attribute"> <span class="shared-item_cards-attributes_component__label">Software Version: </span> <span class="shared-item_cards-attributes_component__value">CSS 2 - 3</span> </li> </ul> <div class="shared-item_cards-included_files_component__root"> File Types Included: <ul> <li class="shared-item_cards-included_files_component__fileType">HTML</li> <li class="shared-item_cards-included_files_component__fileType">CSS</li> </ul> </div> </div> </div> <div class="shared-item_cards-list-image_card_component__priceWrapper"> <div class="shared-item_cards-list-image_card_component__info"> <div class="shared-item_cards-list-image_card_component__favAndCollections"> <a href="/my/bookmarks/new?item_id=21167030" class="shared-item_cards-collection_button_component__collection" role="button" aria-label="Add to collection" title="Add to collection" rel="nofollow" data-controller="collection-button" data-action="collection-button#open" data-bookmark-button-target="bookmarkButton" data-item-id="21167030" > <span class="shared-item_cards-collection_button_component__icon"> <svg width='100%' height='100%'> <use xlink:href='/storefront/assets/icon_spritesheet-2c8173174a30370958101e9b5e0dc4a0503c16573b4e2c0961245849681b052e.svg#collection'></use> </svg> </span> </a> <span class="shared-item_cards-list-image_card_component__buttonSeparator"></span> <form method="post" action="/my/favorites/21167030" data-controller="favorite-button" data-action="submit->favorite-button#submit favoritesStoreUpdated@window->favorite-button#updateFromStore"> <input type="hidden" name="_method" value="post" data-favorite-button-target="formMethod"> <button type="submit" aria-label="Add to Favorites" class="shared-item_cards-favorite_button_component__favoriteButton" data-favorite-button-target="favoriteButton" data-favorited="false" data-item-id="21167030"> <svg width='100%' height='100%'> <use xlink:href='/storefront/assets/icon_spritesheet-2c8173174a30370958101e9b5e0dc4a0503c16573b4e2c0961245849681b052e.svg#heart'></use> </svg> </button> </form> </div> <div class="shared-item_cards-price_component__root"> $8 </div> <div class="shared-item_cards-list-image_card_component__ratingWrapper"></div> <div class="shared-item_cards-sales_component__root"> 51 Sales </div> <div class="shared-item_cards-list-image_card_component__lastUpdated shared-item_cards-list-image_card_component__tinyText"> Last updated: 23 Oct 18 </div> </div> <div class="shared-item_cards-list-image_card_component__coverWrapper"> <a class="shared-item_cards-add_to_cart_button_component__root shared-item_cards-add_to_cart_button_component__compact" role="button" title="Add to cart" aria-label="Add to cart" href="/cart/configure_before_adding/21167030" rel="nofollow" data-controller="cart-button modal-commander add-to-cart-event" data-action="click->modal-commander#open cartStoreUpdated@window->cart-button#updateFromStore click->add-to-cart-event#sendEvent" data-modal-commander-url-value="/my/cart_entries?item_id=21167030" data-modal-commander-method-value="POST" data-cart-button-item-id-value="21167030" data-cart-button-in-cart-class="shared-item_cards-add_to_cart_button_component__inCart" data-analytics-cart-button-payload="{"eventName":"add_to_cart","eventType":"user","quantityUpdate":false,"ecommerce":{"currency":"USD","value":"8.00","items":[{"affiliation":"codecanyon","itemId":21167030,"itemName":"Essential Image Hover Effects","itemBrand":"thecodude","itemCategory":"css","itemCategory2":"animations-and-effects","itemCategory3":null,"price":"8.00","quantity":1}]}}" > <span class="shared-item_cards-add_to_cart_button_component__cartIcon"> <svg width='100%' height='100%'> <use xlink:href='/storefront/assets/icon_spritesheet-2c8173174a30370958101e9b5e0dc4a0503c16573b4e2c0961245849681b052e.svg#cart'></use> </svg> </span> </a> <a href="https://codecanyon.net/item/essential-image-hover-effects/full_screen_preview/21167030" class="shared-item_cards-preview_button_with_analytics_component__root" target="_blank" rel="noopener" > Live Preview </a> </div> </div> </div> </div> </div> <div class="shared-item_cards-card_component__root"> <div class="shared-item_cards-list-image_card_component__root" data-favorites-loader-target="item" data-item-id="5741917" data-price="12.00" data-site="codecanyon" > <div class="shared-item_cards-list-image_card_component__contentWrapper shared-item_cards-list-image_card_component__landscapeImage"> <a class="shared-item_cards-list-image_card_component__itemLinkOverlay" href="https://codecanyon.net/item/3d-text-effect-css3/5741917" title="3D Text Effect - CSS3" aria-label="View 3D Text Effect - CSS3" data-turbo="false" data-analytics-click-payload="{"eventName":"select_item","eventType":"user","ecommerce":{"currency":"USD","items":[{"affiliation":"codecanyon","itemId":5741917,"itemName":"3D Text Effect - CSS3","itemBrand":"Art101","itemCategory":"css","itemCategory2":"animations-and-effects","itemCategory3":null,"price":"12.00","quantity":1}]}}"></a> <div class="shared-item_cards-list-image_card_component__imageWrapper"> <div class="shared-item_cards-preview_image_component__carousel shared-item_cards-preview_image_component__singleImage" style="padding-bottom: 50.847457627118644%" > <a class="shared-item_cards-preview_image_component__imageLink" data-turbo="false" data-analytics-click-payload="{"eventName":"select_item","eventType":"user","ecommerce":{"currency":"USD","items":[{"affiliation":"codecanyon","itemId":5741917,"itemName":"3D Text Effect - CSS3","itemBrand":"Art101","itemCategory":"css","itemCategory2":"animations-and-effects","itemCategory3":null,"price":"12.00","quantity":1}]}}" href="https://codecanyon.net/item/3d-text-effect-css3/5741917"> <img src="https://market-resized.envatousercontent.com/previews/files/253581772/preview.png?w=590&h=300&cf_fit=crop&crop=top&format=auto&q=85&s=0704a701c6f78880d28262c9ad1ffc0a1922ba6f1a685efa691637eea37f0088" loading="lazy" style="left: 0%" class="shared-item_cards-preview_image_component__image" alt="3D Text Effect - CSS3" title="3D Text Effect - CSS3" width="590" height="300" data-controller="image-preview" data-action="error->image-preview#setFallback" data-fallback="https://previews.customer.envatousercontent.com/files/253581772/preview.png" data-carousel-target="image" /> </a></div> <div class="shared-item_cards-list-image_card_component__gradient" style="padding-top: 50.847457627118644%;"> <div class="shared-item_cards-list-image_card_component__buttons"> <a href="/my/bookmarks/new?item_id=5741917" class="shared-item_cards-collection_button_component__collection" role="button" aria-label="Add to collection" title="Add to collection" rel="nofollow" data-controller="collection-button" data-action="collection-button#open" data-bookmark-button-target="bookmarkButton" data-item-id="5741917" > <span class="shared-item_cards-collection_button_component__icon"> <svg width='100%' height='100%'> <use xlink:href='/storefront/assets/icon_spritesheet-2c8173174a30370958101e9b5e0dc4a0503c16573b4e2c0961245849681b052e.svg#collection'></use> </svg> </span> </a> <span class="shared-item_cards-list-image_card_component__buttonSeparator"></span> <form method="post" action="/my/favorites/5741917" data-controller="favorite-button" data-action="submit->favorite-button#submit favoritesStoreUpdated@window->favorite-button#updateFromStore"> <input type="hidden" name="_method" value="post" data-favorite-button-target="formMethod"> <button type="submit" aria-label="Add to Favorites" class="shared-item_cards-favorite_button_component__favoriteButton" data-favorite-button-target="favoriteButton" data-favorited="false" data-item-id="5741917"> <svg width='100%' height='100%'> <use xlink:href='/storefront/assets/icon_spritesheet-2c8173174a30370958101e9b5e0dc4a0503c16573b4e2c0961245849681b052e.svg#heart'></use> </svg> </button> </form> </div> </div> </div> <div class="shared-item_cards-list-image_card_component__detailsWrapper"> <h3 class="shared-item_cards-item_name_component__root"> <a class="shared-item_cards-item_name_component__itemNameLink" tabindex="0" data-turbo="false" data-analytics-click-payload="{"eventName":"select_item","eventType":"user","ecommerce":{"currency":"USD","items":[{"affiliation":"codecanyon","itemId":5741917,"itemName":"3D Text Effect - CSS3","itemBrand":"Art101","itemCategory":"css","itemCategory2":"animations-and-effects","itemCategory3":null,"price":"12.00","quantity":1}]}}" href="https://codecanyon.net/item/3d-text-effect-css3/5741917">3D Text Effect - CSS3</a> </h3> <div> <div class="shared-item_cards-author_category_component__root"> <i>by</i> <a href="https://codecanyon.net/user/art101" class="shared-item_cards-author_category_component__link" rel="nofollow" data-turbo="false" > Art101 </a> in <a href="/category/css/animations-and-effects" class="shared-item_cards-author_category_component__link" > Animations And Effects </a> </div> </div> <div class="shared-item_cards-list-image_card_component__attrsWrapper"> <ul> <li class="shared-item_cards-attributes_component__attribute"> <span class="shared-item_cards-attributes_component__label">Software Version: </span> <span class="shared-item_cards-attributes_component__value">CSS 3</span> </li> </ul> <div class="shared-item_cards-included_files_component__root"> File Types Included: <ul> <li class="shared-item_cards-included_files_component__fileType">HTML</li> <li class="shared-item_cards-included_files_component__fileType">CSS</li> </ul> </div> </div> </div> <div class="shared-item_cards-list-image_card_component__priceWrapper"> <div class="shared-item_cards-list-image_card_component__info"> <div class="shared-item_cards-list-image_card_component__favAndCollections"> <a href="/my/bookmarks/new?item_id=5741917" class="shared-item_cards-collection_button_component__collection" role="button" aria-label="Add to collection" title="Add to collection" rel="nofollow" data-controller="collection-button" data-action="collection-button#open" data-bookmark-button-target="bookmarkButton" data-item-id="5741917" > <span class="shared-item_cards-collection_button_component__icon"> <svg width='100%' height='100%'> <use xlink:href='/storefront/assets/icon_spritesheet-2c8173174a30370958101e9b5e0dc4a0503c16573b4e2c0961245849681b052e.svg#collection'></use> </svg> </span> </a> <span class="shared-item_cards-list-image_card_component__buttonSeparator"></span> <form method="post" action="/my/favorites/5741917" data-controller="favorite-button" data-action="submit->favorite-button#submit favoritesStoreUpdated@window->favorite-button#updateFromStore"> <input type="hidden" name="_method" value="post" data-favorite-button-target="formMethod"> <button type="submit" aria-label="Add to Favorites" class="shared-item_cards-favorite_button_component__favoriteButton" data-favorite-button-target="favoriteButton" data-favorited="false" data-item-id="5741917"> <svg width='100%' height='100%'> <use xlink:href='/storefront/assets/icon_spritesheet-2c8173174a30370958101e9b5e0dc4a0503c16573b4e2c0961245849681b052e.svg#heart'></use> </svg> </button> </form> </div> <div class="shared-item_cards-price_component__root"> $12 </div> <div class="shared-item_cards-list-image_card_component__ratingWrapper"></div> <div class="shared-item_cards-sales_component__root"> 49 Sales </div> <div class="shared-item_cards-list-image_card_component__lastUpdated shared-item_cards-list-image_card_component__tinyText"> Last updated: 08 Sep 18 </div> </div> <div class="shared-item_cards-list-image_card_component__coverWrapper"> <div class="shared-item_cards-list-image_card_component__addToCartDesktop"> <a class="shared-item_cards-add_to_cart_button_component__root" role="button" title="Add to cart" aria-label="Add to cart" href="/cart/configure_before_adding/5741917" rel="nofollow" data-controller="cart-button modal-commander add-to-cart-event" data-action="click->modal-commander#open cartStoreUpdated@window->cart-button#updateFromStore click->add-to-cart-event#sendEvent" data-modal-commander-url-value="/my/cart_entries?item_id=5741917" data-modal-commander-method-value="POST" data-cart-button-item-id-value="5741917" data-cart-button-in-cart-class="shared-item_cards-add_to_cart_button_component__inCart" data-analytics-cart-button-payload="{"eventName":"add_to_cart","eventType":"user","quantityUpdate":false,"ecommerce":{"currency":"USD","value":"12.00","items":[{"affiliation":"codecanyon","itemId":5741917,"itemName":"3D Text Effect - CSS3","itemBrand":"Art101","itemCategory":"css","itemCategory2":"animations-and-effects","itemCategory3":null,"price":"12.00","quantity":1}]}}" > Add to Cart </a> </div> <div class="shared-item_cards-list-image_card_component__addToCartMobile"> <a class="shared-item_cards-add_to_cart_button_component__root shared-item_cards-add_to_cart_button_component__compact" role="button" title="Add to cart" aria-label="Add to cart" href="/cart/configure_before_adding/5741917" rel="nofollow" data-controller="cart-button modal-commander add-to-cart-event" data-action="click->modal-commander#open cartStoreUpdated@window->cart-button#updateFromStore click->add-to-cart-event#sendEvent" data-modal-commander-url-value="/my/cart_entries?item_id=5741917" data-modal-commander-method-value="POST" data-cart-button-item-id-value="5741917" data-cart-button-in-cart-class="shared-item_cards-add_to_cart_button_component__inCart" data-analytics-cart-button-payload="{"eventName":"add_to_cart","eventType":"user","quantityUpdate":false,"ecommerce":{"currency":"USD","value":"12.00","items":[{"affiliation":"codecanyon","itemId":5741917,"itemName":"3D Text Effect - CSS3","itemBrand":"Art101","itemCategory":"css","itemCategory2":"animations-and-effects","itemCategory3":null,"price":"12.00","quantity":1}]}}" > <span class="shared-item_cards-add_to_cart_button_component__cartIcon"> <svg width='100%' height='100%'> <use xlink:href='/storefront/assets/icon_spritesheet-2c8173174a30370958101e9b5e0dc4a0503c16573b4e2c0961245849681b052e.svg#cart'></use> </svg> </span> </a> </div> </div> </div> </div> </div> </div> <div class="shared-item_cards-card_component__root"> <div class="shared-item_cards-list-image_card_component__root" data-favorites-loader-target="item" data-item-id="14234524" data-price="7.00" data-site="codecanyon" > <div class="shared-item_cards-list-image_card_component__contentWrapper shared-item_cards-list-image_card_component__landscapeImage"> <a class="shared-item_cards-list-image_card_component__itemLinkOverlay" href="https://codecanyon.net/item/viavi-css3-scroll-effects/14234524" title="Viavi CSS3 Scroll Effects" aria-label="View Viavi CSS3 Scroll Effects" data-turbo="false" data-analytics-click-payload="{"eventName":"select_item","eventType":"user","ecommerce":{"currency":"USD","items":[{"affiliation":"codecanyon","itemId":14234524,"itemName":"Viavi CSS3 Scroll Effects","itemBrand":"viaviwebtech","itemCategory":"css","itemCategory2":"animations-and-effects","itemCategory3":null,"price":"7.00","quantity":1}]}}"></a> <div class="shared-item_cards-list-image_card_component__imageWrapper"> <div class="shared-item_cards-preview_image_component__carousel shared-item_cards-preview_image_component__singleImage" style="padding-bottom: 50.847457627118644%" > <a class="shared-item_cards-preview_image_component__imageLink" data-turbo="false" data-analytics-click-payload="{"eventName":"select_item","eventType":"user","ecommerce":{"currency":"USD","items":[{"affiliation":"codecanyon","itemId":14234524,"itemName":"Viavi CSS3 Scroll Effects","itemBrand":"viaviwebtech","itemCategory":"css","itemCategory2":"animations-and-effects","itemCategory3":null,"price":"7.00","quantity":1}]}}" href="https://codecanyon.net/item/viavi-css3-scroll-effects/14234524"> <img src="https://market-resized.envatousercontent.com/previews/files/165043769/viavi_css3_scroll_effects_banner.jpg?w=590&h=300&cf_fit=crop&crop=top&format=auto&q=85&s=17246afb882b46d401e98eb4158aff585ea5af8f05bd0d25265729b1b07add4f" loading="lazy" style="left: 0%" class="shared-item_cards-preview_image_component__image" alt="Viavi CSS3 Scroll Effects" title="Viavi CSS3 Scroll Effects" width="590" height="300" data-controller="image-preview" data-action="error->image-preview#setFallback" data-fallback="https://previews.customer.envatousercontent.com/files/165043769/viavi_css3_scroll_effects_banner.jpg" data-carousel-target="image" /> </a></div> <div class="shared-item_cards-list-image_card_component__gradient" style="padding-top: 50.847457627118644%;"> <div class="shared-item_cards-list-image_card_component__buttons"> <a href="/my/bookmarks/new?item_id=14234524" class="shared-item_cards-collection_button_component__collection" role="button" aria-label="Add to collection" title="Add to collection" rel="nofollow" data-controller="collection-button" data-action="collection-button#open" data-bookmark-button-target="bookmarkButton" data-item-id="14234524" > <span class="shared-item_cards-collection_button_component__icon"> <svg width='100%' height='100%'> <use xlink:href='/storefront/assets/icon_spritesheet-2c8173174a30370958101e9b5e0dc4a0503c16573b4e2c0961245849681b052e.svg#collection'></use> </svg> </span> </a> <span class="shared-item_cards-list-image_card_component__buttonSeparator"></span> <form method="post" action="/my/favorites/14234524" data-controller="favorite-button" data-action="submit->favorite-button#submit favoritesStoreUpdated@window->favorite-button#updateFromStore"> <input type="hidden" name="_method" value="post" data-favorite-button-target="formMethod"> <button type="submit" aria-label="Add to Favorites" class="shared-item_cards-favorite_button_component__favoriteButton" data-favorite-button-target="favoriteButton" data-favorited="false" data-item-id="14234524"> <svg width='100%' height='100%'> <use xlink:href='/storefront/assets/icon_spritesheet-2c8173174a30370958101e9b5e0dc4a0503c16573b4e2c0961245849681b052e.svg#heart'></use> </svg> </button> </form> </div> </div> </div> <div class="shared-item_cards-list-image_card_component__detailsWrapper"> <h3 class="shared-item_cards-item_name_component__root"> <a class="shared-item_cards-item_name_component__itemNameLink" tabindex="0" data-turbo="false" data-analytics-click-payload="{"eventName":"select_item","eventType":"user","ecommerce":{"currency":"USD","items":[{"affiliation":"codecanyon","itemId":14234524,"itemName":"Viavi CSS3 Scroll Effects","itemBrand":"viaviwebtech","itemCategory":"css","itemCategory2":"animations-and-effects","itemCategory3":null,"price":"7.00","quantity":1}]}}" href="https://codecanyon.net/item/viavi-css3-scroll-effects/14234524">Viavi CSS3 Scroll Effects</a> </h3> <div> <div class="shared-item_cards-author_category_component__root"> <i>by</i> <a href="https://codecanyon.net/user/viaviwebtech" class="shared-item_cards-author_category_component__link" rel="nofollow" data-turbo="false" > viaviwebtech </a> in <a href="/category/css/animations-and-effects" class="shared-item_cards-author_category_component__link" > Animations And Effects </a> </div> </div> <div class="shared-item_cards-list-image_card_component__attrsWrapper"> <ul> <li class="shared-item_cards-attributes_component__attribute"> <span class="shared-item_cards-attributes_component__label">Software Version: </span> <span class="shared-item_cards-attributes_component__value">CSS 3</span> </li> </ul> <div class="shared-item_cards-included_files_component__root"> File Types Included: <ul> <li class="shared-item_cards-included_files_component__fileType">JavaScript JS</li> <li class="shared-item_cards-included_files_component__fileType">HTML</li> <li class="shared-item_cards-included_files_component__fileType">CSS</li> </ul> </div> </div> </div> <div class="shared-item_cards-list-image_card_component__priceWrapper"> <div class="shared-item_cards-list-image_card_component__info"> <div class="shared-item_cards-list-image_card_component__favAndCollections"> <a href="/my/bookmarks/new?item_id=14234524" class="shared-item_cards-collection_button_component__collection" role="button" aria-label="Add to collection" title="Add to collection" rel="nofollow" data-controller="collection-button" data-action="collection-button#open" data-bookmark-button-target="bookmarkButton" data-item-id="14234524" > <span class="shared-item_cards-collection_button_component__icon"> <svg width='100%' height='100%'> <use xlink:href='/storefront/assets/icon_spritesheet-2c8173174a30370958101e9b5e0dc4a0503c16573b4e2c0961245849681b052e.svg#collection'></use> </svg> </span> </a> <span class="shared-item_cards-list-image_card_component__buttonSeparator"></span> <form method="post" action="/my/favorites/14234524" data-controller="favorite-button" data-action="submit->favorite-button#submit favoritesStoreUpdated@window->favorite-button#updateFromStore"> <input type="hidden" name="_method" value="post" data-favorite-button-target="formMethod"> <button type="submit" aria-label="Add to Favorites" class="shared-item_cards-favorite_button_component__favoriteButton" data-favorite-button-target="favoriteButton" data-favorited="false" data-item-id="14234524"> <svg width='100%' height='100%'> <use xlink:href='/storefront/assets/icon_spritesheet-2c8173174a30370958101e9b5e0dc4a0503c16573b4e2c0961245849681b052e.svg#heart'></use> </svg> </button> </form> </div> <div class="shared-item_cards-price_component__root"> $7 </div> <div class="shared-item_cards-list-image_card_component__ratingWrapper"></div> <div class="shared-item_cards-sales_component__root"> 46 Sales </div> <div class="shared-item_cards-list-image_card_component__lastUpdated shared-item_cards-list-image_card_component__tinyText"> Last updated: 29 Dec 15 </div> </div> <div class="shared-item_cards-list-image_card_component__coverWrapper"> <a class="shared-item_cards-add_to_cart_button_component__root shared-item_cards-add_to_cart_button_component__compact" role="button" title="Add to cart" aria-label="Add to cart" href="/cart/configure_before_adding/14234524" rel="nofollow" data-controller="cart-button modal-commander add-to-cart-event" data-action="click->modal-commander#open cartStoreUpdated@window->cart-button#updateFromStore click->add-to-cart-event#sendEvent" data-modal-commander-url-value="/my/cart_entries?item_id=14234524" data-modal-commander-method-value="POST" data-cart-button-item-id-value="14234524" data-cart-button-in-cart-class="shared-item_cards-add_to_cart_button_component__inCart" data-analytics-cart-button-payload="{"eventName":"add_to_cart","eventType":"user","quantityUpdate":false,"ecommerce":{"currency":"USD","value":"7.00","items":[{"affiliation":"codecanyon","itemId":14234524,"itemName":"Viavi CSS3 Scroll Effects","itemBrand":"viaviwebtech","itemCategory":"css","itemCategory2":"animations-and-effects","itemCategory3":null,"price":"7.00","quantity":1}]}}" > <span class="shared-item_cards-add_to_cart_button_component__cartIcon"> <svg width='100%' height='100%'> <use xlink:href='/storefront/assets/icon_spritesheet-2c8173174a30370958101e9b5e0dc4a0503c16573b4e2c0961245849681b052e.svg#cart'></use> </svg> </span> </a> <a href="https://codecanyon.net/item/viavi-css3-scroll-effects/full_screen_preview/14234524" class="shared-item_cards-preview_button_with_analytics_component__root" target="_blank" rel="noopener" > Live Preview </a> </div> </div> </div> </div> </div> <div class="shared-item_cards-card_component__root"> <div class="shared-item_cards-list-image_card_component__root" data-favorites-loader-target="item" data-item-id="11846740" data-price="5.00" data-site="codecanyon" > <div class="shared-item_cards-list-image_card_component__contentWrapper shared-item_cards-list-image_card_component__landscapeImage"> <a class="shared-item_cards-list-image_card_component__itemLinkOverlay" href="https://codecanyon.net/item/tfigure2-image-captions/11846740" title="tFigure2 - Image Captions" aria-label="View tFigure2 - Image Captions" data-turbo="false" data-analytics-click-payload="{"eventName":"select_item","eventType":"user","ecommerce":{"currency":"USD","items":[{"affiliation":"codecanyon","itemId":11846740,"itemName":"tFigure2 - Image Captions","itemBrand":"mmetrodw","itemCategory":"css","itemCategory2":"animations-and-effects","itemCategory3":null,"price":"5.00","quantity":1}]}}"></a> <div class="shared-item_cards-list-image_card_component__imageWrapper"> <div class="shared-item_cards-preview_image_component__carousel shared-item_cards-preview_image_component__singleImage" style="padding-bottom: 50.847457627118644%" > <a class="shared-item_cards-preview_image_component__imageLink" data-turbo="false" data-analytics-click-payload="{"eventName":"select_item","eventType":"user","ecommerce":{"currency":"USD","items":[{"affiliation":"codecanyon","itemId":11846740,"itemName":"tFigure2 - Image Captions","itemBrand":"mmetrodw","itemCategory":"css","itemCategory2":"animations-and-effects","itemCategory3":null,"price":"5.00","quantity":1}]}}" href="https://codecanyon.net/item/tfigure2-image-captions/11846740"> <img src="https://market-resized.envatousercontent.com/previews/files/138355514/preview.jpg?w=590&h=300&cf_fit=crop&crop=top&format=auto&q=85&s=f237de3eb02d3cf73d306433fb59ddc84721abe217d6328be7d2f61f283ea694" loading="lazy" style="left: 0%" class="shared-item_cards-preview_image_component__image" alt="tFigure2 - Image Captions" title="tFigure2 - Image Captions" width="590" height="300" data-controller="image-preview" data-action="error->image-preview#setFallback" data-fallback="https://previews.customer.envatousercontent.com/files/138355514/preview.jpg" data-carousel-target="image" /> </a></div> <div class="shared-item_cards-list-image_card_component__gradient" style="padding-top: 50.847457627118644%;"> <div class="shared-item_cards-list-image_card_component__buttons"> <a href="/my/bookmarks/new?item_id=11846740" class="shared-item_cards-collection_button_component__collection" role="button" aria-label="Add to collection" title="Add to collection" rel="nofollow" data-controller="collection-button" data-action="collection-button#open" data-bookmark-button-target="bookmarkButton" data-item-id="11846740" > <span class="shared-item_cards-collection_button_component__icon"> <svg width='100%' height='100%'> <use xlink:href='/storefront/assets/icon_spritesheet-2c8173174a30370958101e9b5e0dc4a0503c16573b4e2c0961245849681b052e.svg#collection'></use> </svg> </span> </a> <span class="shared-item_cards-list-image_card_component__buttonSeparator"></span> <form method="post" action="/my/favorites/11846740" data-controller="favorite-button" data-action="submit->favorite-button#submit favoritesStoreUpdated@window->favorite-button#updateFromStore"> <input type="hidden" name="_method" value="post" data-favorite-button-target="formMethod"> <button type="submit" aria-label="Add to Favorites" class="shared-item_cards-favorite_button_component__favoriteButton" data-favorite-button-target="favoriteButton" data-favorited="false" data-item-id="11846740"> <svg width='100%' height='100%'> <use xlink:href='/storefront/assets/icon_spritesheet-2c8173174a30370958101e9b5e0dc4a0503c16573b4e2c0961245849681b052e.svg#heart'></use> </svg> </button> </form> </div> </div> </div> <div class="shared-item_cards-list-image_card_component__detailsWrapper"> <h3 class="shared-item_cards-item_name_component__root"> <a class="shared-item_cards-item_name_component__itemNameLink" tabindex="0" data-turbo="false" data-analytics-click-payload="{"eventName":"select_item","eventType":"user","ecommerce":{"currency":"USD","items":[{"affiliation":"codecanyon","itemId":11846740,"itemName":"tFigure2 - Image Captions","itemBrand":"mmetrodw","itemCategory":"css","itemCategory2":"animations-and-effects","itemCategory3":null,"price":"5.00","quantity":1}]}}" href="https://codecanyon.net/item/tfigure2-image-captions/11846740">tFigure2 - Image Captions</a> </h3> <div> <div class="shared-item_cards-author_category_component__root"> <i>by</i> <a href="https://codecanyon.net/user/mmetrodw" class="shared-item_cards-author_category_component__link" rel="nofollow" data-turbo="false" > mmetrodw </a> in <a href="/category/css/animations-and-effects" class="shared-item_cards-author_category_component__link" > Animations And Effects </a> </div> </div> <div class="shared-item_cards-list-image_card_component__attrsWrapper"> <div class="shared-item_cards-included_files_component__root"> File Types Included: <ul> <li class="shared-item_cards-included_files_component__fileType">HTML</li> <li class="shared-item_cards-included_files_component__fileType">CSS</li> <li class="shared-item_cards-included_files_component__fileType">Layered PNG</li> </ul> </div> </div> </div> <div class="shared-item_cards-list-image_card_component__priceWrapper"> <div class="shared-item_cards-list-image_card_component__info"> <div class="shared-item_cards-list-image_card_component__favAndCollections"> <a href="/my/bookmarks/new?item_id=11846740" class="shared-item_cards-collection_button_component__collection" role="button" aria-label="Add to collection" title="Add to collection" rel="nofollow" data-controller="collection-button" data-action="collection-button#open" data-bookmark-button-target="bookmarkButton" data-item-id="11846740" > <span class="shared-item_cards-collection_button_component__icon"> <svg width='100%' height='100%'> <use xlink:href='/storefront/assets/icon_spritesheet-2c8173174a30370958101e9b5e0dc4a0503c16573b4e2c0961245849681b052e.svg#collection'></use> </svg> </span> </a> <span class="shared-item_cards-list-image_card_component__buttonSeparator"></span> <form method="post" action="/my/favorites/11846740" data-controller="favorite-button" data-action="submit->favorite-button#submit favoritesStoreUpdated@window->favorite-button#updateFromStore"> <input type="hidden" name="_method" value="post" data-favorite-button-target="formMethod"> <button type="submit" aria-label="Add to Favorites" class="shared-item_cards-favorite_button_component__favoriteButton" data-favorite-button-target="favoriteButton" data-favorited="false" data-item-id="11846740"> <svg width='100%' height='100%'> <use xlink:href='/storefront/assets/icon_spritesheet-2c8173174a30370958101e9b5e0dc4a0503c16573b4e2c0961245849681b052e.svg#heart'></use> </svg> </button> </form> </div> <div class="shared-item_cards-price_component__root"> $5 </div> <div class="shared-item_cards-list-image_card_component__ratingWrapper"></div> <div class="shared-item_cards-sales_component__root"> 43 Sales </div> <div class="shared-item_cards-list-image_card_component__lastUpdated shared-item_cards-list-image_card_component__tinyText"> Last updated: 18 Jun 15 </div> </div> <div class="shared-item_cards-list-image_card_component__coverWrapper"> <a class="shared-item_cards-add_to_cart_button_component__root shared-item_cards-add_to_cart_button_component__compact" role="button" title="Add to cart" aria-label="Add to cart" href="/cart/configure_before_adding/11846740" rel="nofollow" data-controller="cart-button modal-commander add-to-cart-event" data-action="click->modal-commander#open cartStoreUpdated@window->cart-button#updateFromStore click->add-to-cart-event#sendEvent" data-modal-commander-url-value="/my/cart_entries?item_id=11846740" data-modal-commander-method-value="POST" data-cart-button-item-id-value="11846740" data-cart-button-in-cart-class="shared-item_cards-add_to_cart_button_component__inCart" data-analytics-cart-button-payload="{"eventName":"add_to_cart","eventType":"user","quantityUpdate":false,"ecommerce":{"currency":"USD","value":"5.00","items":[{"affiliation":"codecanyon","itemId":11846740,"itemName":"tFigure2 - Image Captions","itemBrand":"mmetrodw","itemCategory":"css","itemCategory2":"animations-and-effects","itemCategory3":null,"price":"5.00","quantity":1}]}}" > <span class="shared-item_cards-add_to_cart_button_component__cartIcon"> <svg width='100%' height='100%'> <use xlink:href='/storefront/assets/icon_spritesheet-2c8173174a30370958101e9b5e0dc4a0503c16573b4e2c0961245849681b052e.svg#cart'></use> </svg> </span> </a> <a href="https://codecanyon.net/item/tfigure2-image-captions/full_screen_preview/11846740" class="shared-item_cards-preview_button_with_analytics_component__root" target="_blank" rel="noopener" > Live Preview </a> </div> </div> </div> </div> </div> <div class="shared-item_cards-card_component__root"> <div class="shared-item_cards-list-image_card_component__root" data-favorites-loader-target="item" data-item-id="4838409" data-price="6.00" data-site="codecanyon" > <div class="shared-item_cards-list-image_card_component__contentWrapper shared-item_cards-list-image_card_component__landscapeImage"> <a class="shared-item_cards-list-image_card_component__itemLinkOverlay" href="https://codecanyon.net/item/tilebox-modern-responsive-lightbox-css/4838409" title="TileBox - Modern Responsive LightBox CSS" aria-label="View TileBox - Modern Responsive LightBox CSS" data-turbo="false" data-analytics-click-payload="{"eventName":"select_item","eventType":"user","ecommerce":{"currency":"USD","items":[{"affiliation":"codecanyon","itemId":4838409,"itemName":"TileBox - Modern Responsive LightBox CSS","itemBrand":"SOHN","itemCategory":"css","itemCategory2":"animations-and-effects","itemCategory3":null,"price":"6.00","quantity":1}]}}"></a> <div class="shared-item_cards-list-image_card_component__imageWrapper"> <div class="shared-item_cards-preview_image_component__carousel shared-item_cards-preview_image_component__singleImage" style="padding-bottom: 50.847457627118644%" > <a class="shared-item_cards-preview_image_component__imageLink" data-turbo="false" data-analytics-click-payload="{"eventName":"select_item","eventType":"user","ecommerce":{"currency":"USD","items":[{"affiliation":"codecanyon","itemId":4838409,"itemName":"TileBox - Modern Responsive LightBox CSS","itemBrand":"SOHN","itemCategory":"css","itemCategory2":"animations-and-effects","itemCategory3":null,"price":"6.00","quantity":1}]}}" href="https://codecanyon.net/item/tilebox-modern-responsive-lightbox-css/4838409"> <img src="https://market-resized.envatousercontent.com/previews/files/57759729/tilebox-css-banner.png?w=590&h=300&cf_fit=crop&crop=top&format=auto&q=85&s=1a6f5f0a5f09ccb3227f3d1012a2f7f0cf51c03c1873276a4b51746346ce1c2e" loading="lazy" style="left: 0%" class="shared-item_cards-preview_image_component__image" alt="TileBox - Modern Responsive LightBox CSS" title="TileBox - Modern Responsive LightBox CSS" width="590" height="300" data-controller="image-preview" data-action="error->image-preview#setFallback" data-fallback="https://previews.customer.envatousercontent.com/files/57759729/tilebox-css-banner.png" data-carousel-target="image" /> </a></div> <div class="shared-item_cards-list-image_card_component__gradient" style="padding-top: 50.847457627118644%;"> <div class="shared-item_cards-list-image_card_component__buttons"> <a href="/my/bookmarks/new?item_id=4838409" class="shared-item_cards-collection_button_component__collection" role="button" aria-label="Add to collection" title="Add to collection" rel="nofollow" data-controller="collection-button" data-action="collection-button#open" data-bookmark-button-target="bookmarkButton" data-item-id="4838409" > <span class="shared-item_cards-collection_button_component__icon"> <svg width='100%' height='100%'> <use xlink:href='/storefront/assets/icon_spritesheet-2c8173174a30370958101e9b5e0dc4a0503c16573b4e2c0961245849681b052e.svg#collection'></use> </svg> </span> </a> <span class="shared-item_cards-list-image_card_component__buttonSeparator"></span> <form method="post" action="/my/favorites/4838409" data-controller="favorite-button" data-action="submit->favorite-button#submit favoritesStoreUpdated@window->favorite-button#updateFromStore"> <input type="hidden" name="_method" value="post" data-favorite-button-target="formMethod"> <button type="submit" aria-label="Add to Favorites" class="shared-item_cards-favorite_button_component__favoriteButton" data-favorite-button-target="favoriteButton" data-favorited="false" data-item-id="4838409"> <svg width='100%' height='100%'> <use xlink:href='/storefront/assets/icon_spritesheet-2c8173174a30370958101e9b5e0dc4a0503c16573b4e2c0961245849681b052e.svg#heart'></use> </svg> </button> </form> </div> </div> </div> <div class="shared-item_cards-list-image_card_component__detailsWrapper"> <h3 class="shared-item_cards-item_name_component__root"> <a class="shared-item_cards-item_name_component__itemNameLink" tabindex="0" data-turbo="false" data-analytics-click-payload="{"eventName":"select_item","eventType":"user","ecommerce":{"currency":"USD","items":[{"affiliation":"codecanyon","itemId":4838409,"itemName":"TileBox - Modern Responsive LightBox CSS","itemBrand":"SOHN","itemCategory":"css","itemCategory2":"animations-and-effects","itemCategory3":null,"price":"6.00","quantity":1}]}}" href="https://codecanyon.net/item/tilebox-modern-responsive-lightbox-css/4838409">TileBox - Modern Responsive LightBox CSS</a> </h3> <div> <div class="shared-item_cards-author_category_component__root"> <i>by</i> <a href="https://codecanyon.net/user/sohn" class="shared-item_cards-author_category_component__link" rel="nofollow" data-turbo="false" > SOHN </a> in <a href="/category/css/animations-and-effects" class="shared-item_cards-author_category_component__link" > Animations And Effects </a> </div> </div> <div class="shared-item_cards-list-image_card_component__attrsWrapper"> <ul> <li class="shared-item_cards-attributes_component__attribute"> <span class="shared-item_cards-attributes_component__label">Software Version: </span> <span class="shared-item_cards-attributes_component__value">CSS 2 - 3</span> </li> </ul> <div class="shared-item_cards-included_files_component__root"> File Types Included: <ul> <li class="shared-item_cards-included_files_component__fileType">HTML</li> <li class="shared-item_cards-included_files_component__fileType">CSS</li> </ul> </div> </div> </div> <div class="shared-item_cards-list-image_card_component__priceWrapper"> <div class="shared-item_cards-list-image_card_component__info"> <div class="shared-item_cards-list-image_card_component__favAndCollections"> <a href="/my/bookmarks/new?item_id=4838409" class="shared-item_cards-collection_button_component__collection" role="button" aria-label="Add to collection" title="Add to collection" rel="nofollow" data-controller="collection-button" data-action="collection-button#open" data-bookmark-button-target="bookmarkButton" data-item-id="4838409" > <span class="shared-item_cards-collection_button_component__icon"> <svg width='100%' height='100%'> <use xlink:href='/storefront/assets/icon_spritesheet-2c8173174a30370958101e9b5e0dc4a0503c16573b4e2c0961245849681b052e.svg#collection'></use> </svg> </span> </a> <span class="shared-item_cards-list-image_card_component__buttonSeparator"></span> <form method="post" action="/my/favorites/4838409" data-controller="favorite-button" data-action="submit->favorite-button#submit favoritesStoreUpdated@window->favorite-button#updateFromStore"> <input type="hidden" name="_method" value="post" data-favorite-button-target="formMethod"> <button type="submit" aria-label="Add to Favorites" class="shared-item_cards-favorite_button_component__favoriteButton" data-favorite-button-target="favoriteButton" data-favorited="false" data-item-id="4838409"> <svg width='100%' height='100%'> <use xlink:href='/storefront/assets/icon_spritesheet-2c8173174a30370958101e9b5e0dc4a0503c16573b4e2c0961245849681b052e.svg#heart'></use> </svg> </button> </form> </div> <div class="shared-item_cards-price_component__root"> $6 </div> <div class="shared-item_cards-list-image_card_component__ratingWrapper"><div class="shared-stars_rating_component__root"> <div class="shared-stars_rating_component__starRating" role="img" aria-label="Rated 5.0 out of 5, 4 reviews" > <span class="shared-stars_rating_component__star"> <svg width='100%' height='100%'> <use xlink:href='/storefront/assets/icon_spritesheet-2c8173174a30370958101e9b5e0dc4a0503c16573b4e2c0961245849681b052e.svg#stars_5.0'></use> </svg> </span> </div> <span aria-hidden="true" class="shared-stars_rating_component__starRatingCount">(4)</span> </div> </div> <div class="shared-item_cards-sales_component__root"> 40 Sales </div> <div class="shared-item_cards-list-image_card_component__lastUpdated shared-item_cards-list-image_card_component__tinyText"> Last updated: 31 May 13 </div> </div> <div class="shared-item_cards-list-image_card_component__coverWrapper"> <a class="shared-item_cards-add_to_cart_button_component__root shared-item_cards-add_to_cart_button_component__compact" role="button" title="Add to cart" aria-label="Add to cart" href="/cart/configure_before_adding/4838409" rel="nofollow" data-controller="cart-button modal-commander add-to-cart-event" data-action="click->modal-commander#open cartStoreUpdated@window->cart-button#updateFromStore click->add-to-cart-event#sendEvent" data-modal-commander-url-value="/my/cart_entries?item_id=4838409" data-modal-commander-method-value="POST" data-cart-button-item-id-value="4838409" data-cart-button-in-cart-class="shared-item_cards-add_to_cart_button_component__inCart" data-analytics-cart-button-payload="{"eventName":"add_to_cart","eventType":"user","quantityUpdate":false,"ecommerce":{"currency":"USD","value":"6.00","items":[{"affiliation":"codecanyon","itemId":4838409,"itemName":"TileBox - Modern Responsive LightBox CSS","itemBrand":"SOHN","itemCategory":"css","itemCategory2":"animations-and-effects","itemCategory3":null,"price":"6.00","quantity":1}]}}" > <span class="shared-item_cards-add_to_cart_button_component__cartIcon"> <svg width='100%' height='100%'> <use xlink:href='/storefront/assets/icon_spritesheet-2c8173174a30370958101e9b5e0dc4a0503c16573b4e2c0961245849681b052e.svg#cart'></use> </svg> </span> </a> <a href="https://codecanyon.net/item/tilebox-modern-responsive-lightbox-css/full_screen_preview/4838409" class="shared-item_cards-preview_button_with_analytics_component__root" target="_blank" rel="noopener" > Live Preview </a> </div> </div> </div> </div> </div> <div class="shared-item_cards-card_component__root"> <div class="shared-item_cards-list-image_card_component__root" data-favorites-loader-target="item" data-item-id="5811327" data-price="4.00" data-site="codecanyon" > <div class="shared-item_cards-list-image_card_component__contentWrapper shared-item_cards-list-image_card_component__landscapeImage"> <a class="shared-item_cards-list-image_card_component__itemLinkOverlay" href="https://codecanyon.net/item/image-hover-effects/5811327" title="Image Hover Effects" aria-label="View Image Hover Effects" data-turbo="false" data-analytics-click-payload="{"eventName":"select_item","eventType":"user","ecommerce":{"currency":"USD","items":[{"affiliation":"codecanyon","itemId":5811327,"itemName":"Image Hover Effects","itemBrand":"luca8link","itemCategory":"css","itemCategory2":"animations-and-effects","itemCategory3":null,"price":"4.00","quantity":1}]}}"></a> <div class="shared-item_cards-list-image_card_component__imageWrapper"> <div class="shared-item_cards-preview_image_component__carousel shared-item_cards-preview_image_component__singleImage" style="padding-bottom: 50.847457627118644%" > <a class="shared-item_cards-preview_image_component__imageLink" data-turbo="false" data-analytics-click-payload="{"eventName":"select_item","eventType":"user","ecommerce":{"currency":"USD","items":[{"affiliation":"codecanyon","itemId":5811327,"itemName":"Image Hover Effects","itemBrand":"luca8link","itemCategory":"css","itemCategory2":"animations-and-effects","itemCategory3":null,"price":"4.00","quantity":1}]}}" href="https://codecanyon.net/item/image-hover-effects/5811327"> <img src="https://market-resized.envatousercontent.com/previews/files/69353020/promo_ie.jpg?w=590&h=300&cf_fit=crop&crop=top&format=auto&q=85&s=48b3411d1adc6a345fe884c3a593464650b6d0a24557f30012dfdf08fd6a272d" loading="lazy" style="left: 0%" class="shared-item_cards-preview_image_component__image" alt="Image Hover Effects" title="Image Hover Effects" width="590" height="300" data-controller="image-preview" data-action="error->image-preview#setFallback" data-fallback="https://previews.customer.envatousercontent.com/files/69353020/promo_ie.jpg" data-carousel-target="image" /> </a></div> <div class="shared-item_cards-list-image_card_component__gradient" style="padding-top: 50.847457627118644%;"> <div class="shared-item_cards-list-image_card_component__buttons"> <a href="/my/bookmarks/new?item_id=5811327" class="shared-item_cards-collection_button_component__collection" role="button" aria-label="Add to collection" title="Add to collection" rel="nofollow" data-controller="collection-button" data-action="collection-button#open" data-bookmark-button-target="bookmarkButton" data-item-id="5811327" > <span class="shared-item_cards-collection_button_component__icon"> <svg width='100%' height='100%'> <use xlink:href='/storefront/assets/icon_spritesheet-2c8173174a30370958101e9b5e0dc4a0503c16573b4e2c0961245849681b052e.svg#collection'></use> </svg> </span> </a> <span class="shared-item_cards-list-image_card_component__buttonSeparator"></span> <form method="post" action="/my/favorites/5811327" data-controller="favorite-button" data-action="submit->favorite-button#submit favoritesStoreUpdated@window->favorite-button#updateFromStore"> <input type="hidden" name="_method" value="post" data-favorite-button-target="formMethod"> <button type="submit" aria-label="Add to Favorites" class="shared-item_cards-favorite_button_component__favoriteButton" data-favorite-button-target="favoriteButton" data-favorited="false" data-item-id="5811327"> <svg width='100%' height='100%'> <use xlink:href='/storefront/assets/icon_spritesheet-2c8173174a30370958101e9b5e0dc4a0503c16573b4e2c0961245849681b052e.svg#heart'></use> </svg> </button> </form> </div> </div> </div> <div class="shared-item_cards-list-image_card_component__detailsWrapper"> <h3 class="shared-item_cards-item_name_component__root"> <a class="shared-item_cards-item_name_component__itemNameLink" tabindex="0" data-turbo="false" data-analytics-click-payload="{"eventName":"select_item","eventType":"user","ecommerce":{"currency":"USD","items":[{"affiliation":"codecanyon","itemId":5811327,"itemName":"Image Hover Effects","itemBrand":"luca8link","itemCategory":"css","itemCategory2":"animations-and-effects","itemCategory3":null,"price":"4.00","quantity":1}]}}" href="https://codecanyon.net/item/image-hover-effects/5811327">Image Hover Effects</a> </h3> <div> <div class="shared-item_cards-author_category_component__root"> <i>by</i> <a href="https://codecanyon.net/user/luca8link" class="shared-item_cards-author_category_component__link" rel="nofollow" data-turbo="false" > luca8link </a> in <a href="/category/css/animations-and-effects" class="shared-item_cards-author_category_component__link" > Animations And Effects </a> </div> </div> <div class="shared-item_cards-list-image_card_component__attrsWrapper"> <ul> <li class="shared-item_cards-attributes_component__attribute"> <span class="shared-item_cards-attributes_component__label">Software Version: </span> <span class="shared-item_cards-attributes_component__value">CSS 3</span> </li> </ul> <div class="shared-item_cards-included_files_component__root"> File Types Included: <ul> <li class="shared-item_cards-included_files_component__fileType">HTML</li> <li class="shared-item_cards-included_files_component__fileType">CSS</li> </ul> </div> </div> </div> <div class="shared-item_cards-list-image_card_component__priceWrapper"> <div class="shared-item_cards-list-image_card_component__info"> <div class="shared-item_cards-list-image_card_component__favAndCollections"> <a href="/my/bookmarks/new?item_id=5811327" class="shared-item_cards-collection_button_component__collection" role="button" aria-label="Add to collection" title="Add to collection" rel="nofollow" data-controller="collection-button" data-action="collection-button#open" data-bookmark-button-target="bookmarkButton" data-item-id="5811327" > <span class="shared-item_cards-collection_button_component__icon"> <svg width='100%' height='100%'> <use xlink:href='/storefront/assets/icon_spritesheet-2c8173174a30370958101e9b5e0dc4a0503c16573b4e2c0961245849681b052e.svg#collection'></use> </svg> </span> </a> <span class="shared-item_cards-list-image_card_component__buttonSeparator"></span> <form method="post" action="/my/favorites/5811327" data-controller="favorite-button" data-action="submit->favorite-button#submit favoritesStoreUpdated@window->favorite-button#updateFromStore"> <input type="hidden" name="_method" value="post" data-favorite-button-target="formMethod"> <button type="submit" aria-label="Add to Favorites" class="shared-item_cards-favorite_button_component__favoriteButton" data-favorite-button-target="favoriteButton" data-favorited="false" data-item-id="5811327"> <svg width='100%' height='100%'> <use xlink:href='/storefront/assets/icon_spritesheet-2c8173174a30370958101e9b5e0dc4a0503c16573b4e2c0961245849681b052e.svg#heart'></use> </svg> </button> </form> </div> <div class="shared-item_cards-price_component__root"> $4 </div> <div class="shared-item_cards-list-image_card_component__ratingWrapper"><div class="shared-stars_rating_component__root"> <div class="shared-stars_rating_component__starRating" role="img" aria-label="Rated 3.75 out of 5, 4 reviews" > <span class="shared-stars_rating_component__star"> <svg width='100%' height='100%'> <use xlink:href='/storefront/assets/icon_spritesheet-2c8173174a30370958101e9b5e0dc4a0503c16573b4e2c0961245849681b052e.svg#stars_4.0'></use> </svg> </span> </div> <span aria-hidden="true" class="shared-stars_rating_component__starRatingCount">(4)</span> </div> </div> <div class="shared-item_cards-sales_component__root"> 37 Sales </div> <div class="shared-item_cards-list-image_card_component__lastUpdated shared-item_cards-list-image_card_component__tinyText"> Last updated: 12 Jun 14 </div> </div> <div class="shared-item_cards-list-image_card_component__coverWrapper"> <a class="shared-item_cards-add_to_cart_button_component__root shared-item_cards-add_to_cart_button_component__compact" role="button" title="Add to cart" aria-label="Add to cart" href="/cart/configure_before_adding/5811327" rel="nofollow" data-controller="cart-button modal-commander add-to-cart-event" data-action="click->modal-commander#open cartStoreUpdated@window->cart-button#updateFromStore click->add-to-cart-event#sendEvent" data-modal-commander-url-value="/my/cart_entries?item_id=5811327" data-modal-commander-method-value="POST" data-cart-button-item-id-value="5811327" data-cart-button-in-cart-class="shared-item_cards-add_to_cart_button_component__inCart" data-analytics-cart-button-payload="{"eventName":"add_to_cart","eventType":"user","quantityUpdate":false,"ecommerce":{"currency":"USD","value":"4.00","items":[{"affiliation":"codecanyon","itemId":5811327,"itemName":"Image Hover Effects","itemBrand":"luca8link","itemCategory":"css","itemCategory2":"animations-and-effects","itemCategory3":null,"price":"4.00","quantity":1}]}}" > <span class="shared-item_cards-add_to_cart_button_component__cartIcon"> <svg width='100%' height='100%'> <use xlink:href='/storefront/assets/icon_spritesheet-2c8173174a30370958101e9b5e0dc4a0503c16573b4e2c0961245849681b052e.svg#cart'></use> </svg> </span> </a> <a href="https://codecanyon.net/item/image-hover-effects/full_screen_preview/5811327" class="shared-item_cards-preview_button_with_analytics_component__root" target="_blank" rel="noopener" > Live Preview </a> </div> </div> </div> </div> </div> <div class="shared-item_cards-card_component__root"> <div class="shared-item_cards-list-image_card_component__root" data-favorites-loader-target="item" data-item-id="5713140" data-price="5.00" data-site="codecanyon" > <div class="shared-item_cards-list-image_card_component__contentWrapper shared-item_cards-list-image_card_component__landscapeImage"> <a class="shared-item_cards-list-image_card_component__itemLinkOverlay" href="https://codecanyon.net/item/css3-productfolio-with-image-mapping/5713140" title="CSS3 Product-Folio with Image Mapping" aria-label="View CSS3 Product-Folio with Image Mapping" data-turbo="false" data-analytics-click-payload="{"eventName":"select_item","eventType":"user","ecommerce":{"currency":"USD","items":[{"affiliation":"codecanyon","itemId":5713140,"itemName":"CSS3 Product-Folio with Image Mapping","itemBrand":"MaheshSamudra","itemCategory":"css","itemCategory2":"animations-and-effects","itemCategory3":null,"price":"5.00","quantity":1}]}}"></a> <div class="shared-item_cards-list-image_card_component__imageWrapper"> <div class="shared-item_cards-preview_image_component__carousel shared-item_cards-preview_image_component__singleImage" style="padding-bottom: 50.847457627118644%" > <a class="shared-item_cards-preview_image_component__imageLink" data-turbo="false" data-analytics-click-payload="{"eventName":"select_item","eventType":"user","ecommerce":{"currency":"USD","items":[{"affiliation":"codecanyon","itemId":5713140,"itemName":"CSS3 Product-Folio with Image Mapping","itemBrand":"MaheshSamudra","itemCategory":"css","itemCategory2":"animations-and-effects","itemCategory3":null,"price":"5.00","quantity":1}]}}" href="https://codecanyon.net/item/css3-productfolio-with-image-mapping/5713140"> <img src="https://market-resized.envatousercontent.com/previews/files/68062931/cover.jpg?w=590&h=300&cf_fit=crop&crop=top&format=auto&q=85&s=1d450ca0dfc6053fa5a58cfcfaa72d196d9a98787cbdf527c60fb2f66400cf1e" loading="lazy" style="left: 0%" class="shared-item_cards-preview_image_component__image" alt="CSS3 Product-Folio with Image Mapping" title="CSS3 Product-Folio with Image Mapping" width="590" height="300" data-controller="image-preview" data-action="error->image-preview#setFallback" data-fallback="https://previews.customer.envatousercontent.com/files/68062931/cover.jpg" data-carousel-target="image" /> </a></div> <div class="shared-item_cards-list-image_card_component__gradient" style="padding-top: 50.847457627118644%;"> <div class="shared-item_cards-list-image_card_component__buttons"> <a href="/my/bookmarks/new?item_id=5713140" class="shared-item_cards-collection_button_component__collection" role="button" aria-label="Add to collection" title="Add to collection" rel="nofollow" data-controller="collection-button" data-action="collection-button#open" data-bookmark-button-target="bookmarkButton" data-item-id="5713140" > <span class="shared-item_cards-collection_button_component__icon"> <svg width='100%' height='100%'> <use xlink:href='/storefront/assets/icon_spritesheet-2c8173174a30370958101e9b5e0dc4a0503c16573b4e2c0961245849681b052e.svg#collection'></use> </svg> </span> </a> <span class="shared-item_cards-list-image_card_component__buttonSeparator"></span> <form method="post" action="/my/favorites/5713140" data-controller="favorite-button" data-action="submit->favorite-button#submit favoritesStoreUpdated@window->favorite-button#updateFromStore"> <input type="hidden" name="_method" value="post" data-favorite-button-target="formMethod"> <button type="submit" aria-label="Add to Favorites" class="shared-item_cards-favorite_button_component__favoriteButton" data-favorite-button-target="favoriteButton" data-favorited="false" data-item-id="5713140"> <svg width='100%' height='100%'> <use xlink:href='/storefront/assets/icon_spritesheet-2c8173174a30370958101e9b5e0dc4a0503c16573b4e2c0961245849681b052e.svg#heart'></use> </svg> </button> </form> </div> </div> </div> <div class="shared-item_cards-list-image_card_component__detailsWrapper"> <h3 class="shared-item_cards-item_name_component__root"> <a class="shared-item_cards-item_name_component__itemNameLink" tabindex="0" data-turbo="false" data-analytics-click-payload="{"eventName":"select_item","eventType":"user","ecommerce":{"currency":"USD","items":[{"affiliation":"codecanyon","itemId":5713140,"itemName":"CSS3 Product-Folio with Image Mapping","itemBrand":"MaheshSamudra","itemCategory":"css","itemCategory2":"animations-and-effects","itemCategory3":null,"price":"5.00","quantity":1}]}}" href="https://codecanyon.net/item/css3-productfolio-with-image-mapping/5713140">CSS3 Product-Folio with Image Mapping</a> </h3> <div> <div class="shared-item_cards-author_category_component__root"> <i>by</i> <a href="https://codecanyon.net/user/maheshsamudra" class="shared-item_cards-author_category_component__link" rel="nofollow" data-turbo="false" > MaheshSamudra </a> in <a href="/category/css/animations-and-effects" class="shared-item_cards-author_category_component__link" > Animations And Effects </a> </div> </div> <div class="shared-item_cards-list-image_card_component__attrsWrapper"> <ul> <li class="shared-item_cards-attributes_component__attribute"> <span class="shared-item_cards-attributes_component__label">Software Version: </span> <span class="shared-item_cards-attributes_component__value">CSS 3</span> </li> </ul> <div class="shared-item_cards-included_files_component__root"> File Types Included: <ul> <li class="shared-item_cards-included_files_component__fileType">HTML</li> <li class="shared-item_cards-included_files_component__fileType">CSS</li> </ul> </div> </div> </div> <div class="shared-item_cards-list-image_card_component__priceWrapper"> <div class="shared-item_cards-list-image_card_component__info"> <div class="shared-item_cards-list-image_card_component__favAndCollections"> <a href="/my/bookmarks/new?item_id=5713140" class="shared-item_cards-collection_button_component__collection" role="button" aria-label="Add to collection" title="Add to collection" rel="nofollow" data-controller="collection-button" data-action="collection-button#open" data-bookmark-button-target="bookmarkButton" data-item-id="5713140" > <span class="shared-item_cards-collection_button_component__icon"> <svg width='100%' height='100%'> <use xlink:href='/storefront/assets/icon_spritesheet-2c8173174a30370958101e9b5e0dc4a0503c16573b4e2c0961245849681b052e.svg#collection'></use> </svg> </span> </a> <span class="shared-item_cards-list-image_card_component__buttonSeparator"></span> <form method="post" action="/my/favorites/5713140" data-controller="favorite-button" data-action="submit->favorite-button#submit favoritesStoreUpdated@window->favorite-button#updateFromStore"> <input type="hidden" name="_method" value="post" data-favorite-button-target="formMethod"> <button type="submit" aria-label="Add to Favorites" class="shared-item_cards-favorite_button_component__favoriteButton" data-favorite-button-target="favoriteButton" data-favorited="false" data-item-id="5713140"> <svg width='100%' height='100%'> <use xlink:href='/storefront/assets/icon_spritesheet-2c8173174a30370958101e9b5e0dc4a0503c16573b4e2c0961245849681b052e.svg#heart'></use> </svg> </button> </form> </div> <div class="shared-item_cards-price_component__root"> $5 </div> <div class="shared-item_cards-list-image_card_component__ratingWrapper"></div> <div class="shared-item_cards-sales_component__root"> 35 Sales </div> <div class="shared-item_cards-list-image_card_component__lastUpdated shared-item_cards-list-image_card_component__tinyText"> Last updated: 29 Sep 13 </div> </div> <div class="shared-item_cards-list-image_card_component__coverWrapper"> <a class="shared-item_cards-add_to_cart_button_component__root shared-item_cards-add_to_cart_button_component__compact" role="button" title="Add to cart" aria-label="Add to cart" href="/cart/configure_before_adding/5713140" rel="nofollow" data-controller="cart-button modal-commander add-to-cart-event" data-action="click->modal-commander#open cartStoreUpdated@window->cart-button#updateFromStore click->add-to-cart-event#sendEvent" data-modal-commander-url-value="/my/cart_entries?item_id=5713140" data-modal-commander-method-value="POST" data-cart-button-item-id-value="5713140" data-cart-button-in-cart-class="shared-item_cards-add_to_cart_button_component__inCart" data-analytics-cart-button-payload="{"eventName":"add_to_cart","eventType":"user","quantityUpdate":false,"ecommerce":{"currency":"USD","value":"5.00","items":[{"affiliation":"codecanyon","itemId":5713140,"itemName":"CSS3 Product-Folio with Image Mapping","itemBrand":"MaheshSamudra","itemCategory":"css","itemCategory2":"animations-and-effects","itemCategory3":null,"price":"5.00","quantity":1}]}}" > <span class="shared-item_cards-add_to_cart_button_component__cartIcon"> <svg width='100%' height='100%'> <use xlink:href='/storefront/assets/icon_spritesheet-2c8173174a30370958101e9b5e0dc4a0503c16573b4e2c0961245849681b052e.svg#cart'></use> </svg> </span> </a> <a href="https://codecanyon.net/item/css3-productfolio-with-image-mapping/full_screen_preview/5713140" class="shared-item_cards-preview_button_with_analytics_component__root" target="_blank" rel="noopener" > Live Preview </a> </div> </div> </div> </div> </div> <div class="shared-item_cards-card_component__root"> <div class="shared-item_cards-list-image_card_component__root" data-favorites-loader-target="item" data-item-id="36537435" data-price="3.00" data-site="codecanyon" > <div class="shared-item_cards-list-image_card_component__contentWrapper shared-item_cards-list-image_card_component__landscapeImage"> <a class="shared-item_cards-list-image_card_component__itemLinkOverlay" href="https://codecanyon.net/item/cssanimatedgradientbackgrounds/36537435" title="CSS-Animated-Gradient-Backgrounds" aria-label="View CSS-Animated-Gradient-Backgrounds" data-turbo="false" data-analytics-click-payload="{"eventName":"select_item","eventType":"user","ecommerce":{"currency":"USD","items":[{"affiliation":"codecanyon","itemId":36537435,"itemName":"CSS-Animated-Gradient-Backgrounds","itemBrand":"mohamed_yousef","itemCategory":"css","itemCategory2":"animations-and-effects","itemCategory3":null,"price":"3.00","quantity":1}]}}"></a> <div class="shared-item_cards-list-image_card_component__imageWrapper"> <div class="shared-item_cards-preview_image_component__carousel shared-item_cards-preview_image_component__singleImage" style="padding-bottom: 50.847457627118644%" > <a class="shared-item_cards-preview_image_component__imageLink" data-turbo="false" data-analytics-click-payload="{"eventName":"select_item","eventType":"user","ecommerce":{"currency":"USD","items":[{"affiliation":"codecanyon","itemId":36537435,"itemName":"CSS-Animated-Gradient-Backgrounds","itemBrand":"mohamed_yousef","itemCategory":"css","itemCategory2":"animations-and-effects","itemCategory3":null,"price":"3.00","quantity":1}]}}" href="https://codecanyon.net/item/cssanimatedgradientbackgrounds/36537435"> <img src="https://market-resized.envatousercontent.com/previews/files/382231196/preview.jpg?w=590&h=300&cf_fit=crop&crop=top&format=auto&q=85&s=8c685f0e640da5dd983d08d8ff7475de2e769ee1d361a9da58b7ff53f6fb7677" loading="lazy" style="left: 0%" class="shared-item_cards-preview_image_component__image" alt="CSS-Animated-Gradient-Backgrounds" title="CSS-Animated-Gradient-Backgrounds" width="590" height="300" data-controller="image-preview" data-action="error->image-preview#setFallback" data-fallback="https://previews.customer.envatousercontent.com/files/382231196/preview.jpg" data-carousel-target="image" /> </a></div> <div class="shared-item_cards-list-image_card_component__gradient" style="padding-top: 50.847457627118644%;"> <div class="shared-item_cards-list-image_card_component__buttons"> <a href="/my/bookmarks/new?item_id=36537435" class="shared-item_cards-collection_button_component__collection" role="button" aria-label="Add to collection" title="Add to collection" rel="nofollow" data-controller="collection-button" data-action="collection-button#open" data-bookmark-button-target="bookmarkButton" data-item-id="36537435" > <span class="shared-item_cards-collection_button_component__icon"> <svg width='100%' height='100%'> <use xlink:href='/storefront/assets/icon_spritesheet-2c8173174a30370958101e9b5e0dc4a0503c16573b4e2c0961245849681b052e.svg#collection'></use> </svg> </span> </a> <span class="shared-item_cards-list-image_card_component__buttonSeparator"></span> <form method="post" action="/my/favorites/36537435" data-controller="favorite-button" data-action="submit->favorite-button#submit favoritesStoreUpdated@window->favorite-button#updateFromStore"> <input type="hidden" name="_method" value="post" data-favorite-button-target="formMethod"> <button type="submit" aria-label="Add to Favorites" class="shared-item_cards-favorite_button_component__favoriteButton" data-favorite-button-target="favoriteButton" data-favorited="false" data-item-id="36537435"> <svg width='100%' height='100%'> <use xlink:href='/storefront/assets/icon_spritesheet-2c8173174a30370958101e9b5e0dc4a0503c16573b4e2c0961245849681b052e.svg#heart'></use> </svg> </button> </form> </div> </div> </div> <div class="shared-item_cards-list-image_card_component__detailsWrapper"> <h3 class="shared-item_cards-item_name_component__root"> <a class="shared-item_cards-item_name_component__itemNameLink" tabindex="0" data-turbo="false" data-analytics-click-payload="{"eventName":"select_item","eventType":"user","ecommerce":{"currency":"USD","items":[{"affiliation":"codecanyon","itemId":36537435,"itemName":"CSS-Animated-Gradient-Backgrounds","itemBrand":"mohamed_yousef","itemCategory":"css","itemCategory2":"animations-and-effects","itemCategory3":null,"price":"3.00","quantity":1}]}}" href="https://codecanyon.net/item/cssanimatedgradientbackgrounds/36537435">CSS-Animated-Gradient-Backgrounds</a> </h3> <div> <div class="shared-item_cards-author_category_component__root"> <i>by</i> <a href="https://codecanyon.net/user/mohamed_yousef" class="shared-item_cards-author_category_component__link" rel="nofollow" data-turbo="false" > mohamed_yousef </a> in <a href="/category/css/animations-and-effects" class="shared-item_cards-author_category_component__link" > Animations And Effects </a> </div> </div> <div class="shared-item_cards-list-image_card_component__attrsWrapper"> <ul> <li class="shared-item_cards-attributes_component__attribute"> <span class="shared-item_cards-attributes_component__label">Software Version: </span> <span class="shared-item_cards-attributes_component__value">CSS 3</span> </li> </ul> <div class="shared-item_cards-included_files_component__root"> File Types Included: <ul> <li class="shared-item_cards-included_files_component__fileType">HTML</li> <li class="shared-item_cards-included_files_component__fileType">CSS</li> </ul> </div> </div> </div> <div class="shared-item_cards-list-image_card_component__priceWrapper"> <div class="shared-item_cards-list-image_card_component__info"> <div class="shared-item_cards-list-image_card_component__favAndCollections"> <a href="/my/bookmarks/new?item_id=36537435" class="shared-item_cards-collection_button_component__collection" role="button" aria-label="Add to collection" title="Add to collection" rel="nofollow" data-controller="collection-button" data-action="collection-button#open" data-bookmark-button-target="bookmarkButton" data-item-id="36537435" > <span class="shared-item_cards-collection_button_component__icon"> <svg width='100%' height='100%'> <use xlink:href='/storefront/assets/icon_spritesheet-2c8173174a30370958101e9b5e0dc4a0503c16573b4e2c0961245849681b052e.svg#collection'></use> </svg> </span> </a> <span class="shared-item_cards-list-image_card_component__buttonSeparator"></span> <form method="post" action="/my/favorites/36537435" data-controller="favorite-button" data-action="submit->favorite-button#submit favoritesStoreUpdated@window->favorite-button#updateFromStore"> <input type="hidden" name="_method" value="post" data-favorite-button-target="formMethod"> <button type="submit" aria-label="Add to Favorites" class="shared-item_cards-favorite_button_component__favoriteButton" data-favorite-button-target="favoriteButton" data-favorited="false" data-item-id="36537435"> <svg width='100%' height='100%'> <use xlink:href='/storefront/assets/icon_spritesheet-2c8173174a30370958101e9b5e0dc4a0503c16573b4e2c0961245849681b052e.svg#heart'></use> </svg> </button> </form> </div> <div class="shared-item_cards-price_component__root"> $3 </div> <div class="shared-item_cards-list-image_card_component__ratingWrapper"></div> <div class="shared-item_cards-sales_component__root"> 34 Sales </div> <div class="shared-item_cards-list-image_card_component__lastUpdated shared-item_cards-list-image_card_component__tinyText"> Last updated: 08 Mar 22 </div> </div> <div class="shared-item_cards-list-image_card_component__coverWrapper"> <a class="shared-item_cards-add_to_cart_button_component__root shared-item_cards-add_to_cart_button_component__compact" role="button" title="Add to cart" aria-label="Add to cart" href="/cart/configure_before_adding/36537435" rel="nofollow" data-controller="cart-button modal-commander add-to-cart-event" data-action="click->modal-commander#open cartStoreUpdated@window->cart-button#updateFromStore click->add-to-cart-event#sendEvent" data-modal-commander-url-value="/my/cart_entries?item_id=36537435" data-modal-commander-method-value="POST" data-cart-button-item-id-value="36537435" data-cart-button-in-cart-class="shared-item_cards-add_to_cart_button_component__inCart" data-analytics-cart-button-payload="{"eventName":"add_to_cart","eventType":"user","quantityUpdate":false,"ecommerce":{"currency":"USD","value":"3.00","items":[{"affiliation":"codecanyon","itemId":36537435,"itemName":"CSS-Animated-Gradient-Backgrounds","itemBrand":"mohamed_yousef","itemCategory":"css","itemCategory2":"animations-and-effects","itemCategory3":null,"price":"3.00","quantity":1}]}}" > <span class="shared-item_cards-add_to_cart_button_component__cartIcon"> <svg width='100%' height='100%'> <use xlink:href='/storefront/assets/icon_spritesheet-2c8173174a30370958101e9b5e0dc4a0503c16573b4e2c0961245849681b052e.svg#cart'></use> </svg> </span> </a> <a href="https://codecanyon.net/item/cssanimatedgradientbackgrounds/full_screen_preview/36537435" class="shared-item_cards-preview_button_with_analytics_component__root" target="_blank" rel="noopener" > Live Preview </a> </div> </div> </div> </div> </div> <div class="shared-item_cards-card_component__root"> <div class="shared-item_cards-list-image_card_component__root" data-favorites-loader-target="item" data-item-id="21558172" data-price="5.00" data-site="codecanyon" > <div class="shared-item_cards-list-image_card_component__contentWrapper shared-item_cards-list-image_card_component__landscapeImage"> <a class="shared-item_cards-list-image_card_component__itemLinkOverlay" href="https://codecanyon.net/item/card-css3-portfolio-cards-with-hover-effects/21558172" title="CARD - CSS3 Portfolio Cards with Hover Effects" aria-label="View CARD - CSS3 Portfolio Cards with Hover Effects" data-turbo="false" data-analytics-click-payload="{"eventName":"select_item","eventType":"user","ecommerce":{"currency":"USD","items":[{"affiliation":"codecanyon","itemId":21558172,"itemName":"CARD - CSS3 Portfolio Cards with Hover Effects","itemBrand":"krsankarkr","itemCategory":"css","itemCategory2":"animations-and-effects","itemCategory3":null,"price":"5.00","quantity":1}]}}"></a> <div class="shared-item_cards-list-image_card_component__imageWrapper"> <div class="shared-item_cards-preview_image_component__carousel shared-item_cards-preview_image_component__singleImage" style="padding-bottom: 50.847457627118644%" > <a class="shared-item_cards-preview_image_component__imageLink" data-turbo="false" data-analytics-click-payload="{"eventName":"select_item","eventType":"user","ecommerce":{"currency":"USD","items":[{"affiliation":"codecanyon","itemId":21558172,"itemName":"CARD - CSS3 Portfolio Cards with Hover Effects","itemBrand":"krsankarkr","itemCategory":"css","itemCategory2":"animations-and-effects","itemCategory3":null,"price":"5.00","quantity":1}]}}" href="https://codecanyon.net/item/card-css3-portfolio-cards-with-hover-effects/21558172"> <img src="https://market-resized.envatousercontent.com/previews/files/242765389/590x300.jpg?w=590&h=300&cf_fit=crop&crop=top&format=auto&q=85&s=372c521780e5fce3ac88d226b34f617e27d28a7a351b95daebefaf17ffdb0943" loading="lazy" style="left: 0%" class="shared-item_cards-preview_image_component__image" alt="CARD - CSS3 Portfolio Cards with Hover Effects" title="CARD - CSS3 Portfolio Cards with Hover Effects" width="590" height="300" data-controller="image-preview" data-action="error->image-preview#setFallback" data-fallback="https://previews.customer.envatousercontent.com/files/242765389/590x300.jpg" data-carousel-target="image" /> </a></div> <div class="shared-item_cards-list-image_card_component__gradient" style="padding-top: 50.847457627118644%;"> <div class="shared-item_cards-list-image_card_component__buttons"> <a href="/my/bookmarks/new?item_id=21558172" class="shared-item_cards-collection_button_component__collection" role="button" aria-label="Add to collection" title="Add to collection" rel="nofollow" data-controller="collection-button" data-action="collection-button#open" data-bookmark-button-target="bookmarkButton" data-item-id="21558172" > <span class="shared-item_cards-collection_button_component__icon"> <svg width='100%' height='100%'> <use xlink:href='/storefront/assets/icon_spritesheet-2c8173174a30370958101e9b5e0dc4a0503c16573b4e2c0961245849681b052e.svg#collection'></use> </svg> </span> </a> <span class="shared-item_cards-list-image_card_component__buttonSeparator"></span> <form method="post" action="/my/favorites/21558172" data-controller="favorite-button" data-action="submit->favorite-button#submit favoritesStoreUpdated@window->favorite-button#updateFromStore"> <input type="hidden" name="_method" value="post" data-favorite-button-target="formMethod"> <button type="submit" aria-label="Add to Favorites" class="shared-item_cards-favorite_button_component__favoriteButton" data-favorite-button-target="favoriteButton" data-favorited="false" data-item-id="21558172"> <svg width='100%' height='100%'> <use xlink:href='/storefront/assets/icon_spritesheet-2c8173174a30370958101e9b5e0dc4a0503c16573b4e2c0961245849681b052e.svg#heart'></use> </svg> </button> </form> </div> </div> </div> <div class="shared-item_cards-list-image_card_component__detailsWrapper"> <h3 class="shared-item_cards-item_name_component__root"> <a class="shared-item_cards-item_name_component__itemNameLink" tabindex="0" data-turbo="false" data-analytics-click-payload="{"eventName":"select_item","eventType":"user","ecommerce":{"currency":"USD","items":[{"affiliation":"codecanyon","itemId":21558172,"itemName":"CARD - CSS3 Portfolio Cards with Hover Effects","itemBrand":"krsankarkr","itemCategory":"css","itemCategory2":"animations-and-effects","itemCategory3":null,"price":"5.00","quantity":1}]}}" href="https://codecanyon.net/item/card-css3-portfolio-cards-with-hover-effects/21558172">CARD - CSS3 Portfolio Cards with Hover Effects</a> </h3> <div> <div class="shared-item_cards-author_category_component__root"> <i>by</i> <a href="https://codecanyon.net/user/krsankarkr" class="shared-item_cards-author_category_component__link" rel="nofollow" data-turbo="false" > krsankarkr </a> in <a href="/category/css/animations-and-effects" class="shared-item_cards-author_category_component__link" > Animations And Effects </a> </div> </div> <div class="shared-item_cards-list-image_card_component__attrsWrapper"> <ul> <li class="shared-item_cards-attributes_component__attribute"> <span class="shared-item_cards-attributes_component__label">Software Version: </span> <span class="shared-item_cards-attributes_component__value">CSS 2 - 3</span> </li> </ul> <div class="shared-item_cards-included_files_component__root"> File Types Included: <ul> <li class="shared-item_cards-included_files_component__fileType">HTML</li> <li class="shared-item_cards-included_files_component__fileType">CSS</li> </ul> </div> </div> </div> <div class="shared-item_cards-list-image_card_component__priceWrapper"> <div class="shared-item_cards-list-image_card_component__info"> <div class="shared-item_cards-list-image_card_component__favAndCollections"> <a href="/my/bookmarks/new?item_id=21558172" class="shared-item_cards-collection_button_component__collection" role="button" aria-label="Add to collection" title="Add to collection" rel="nofollow" data-controller="collection-button" data-action="collection-button#open" data-bookmark-button-target="bookmarkButton" data-item-id="21558172" > <span class="shared-item_cards-collection_button_component__icon"> <svg width='100%' height='100%'> <use xlink:href='/storefront/assets/icon_spritesheet-2c8173174a30370958101e9b5e0dc4a0503c16573b4e2c0961245849681b052e.svg#collection'></use> </svg> </span> </a> <span class="shared-item_cards-list-image_card_component__buttonSeparator"></span> <form method="post" action="/my/favorites/21558172" data-controller="favorite-button" data-action="submit->favorite-button#submit favoritesStoreUpdated@window->favorite-button#updateFromStore"> <input type="hidden" name="_method" value="post" data-favorite-button-target="formMethod"> <button type="submit" aria-label="Add to Favorites" class="shared-item_cards-favorite_button_component__favoriteButton" data-favorite-button-target="favoriteButton" data-favorited="false" data-item-id="21558172"> <svg width='100%' height='100%'> <use xlink:href='/storefront/assets/icon_spritesheet-2c8173174a30370958101e9b5e0dc4a0503c16573b4e2c0961245849681b052e.svg#heart'></use> </svg> </button> </form> </div> <div class="shared-item_cards-price_component__root"> $5 </div> <div class="shared-item_cards-list-image_card_component__ratingWrapper"></div> <div class="shared-item_cards-sales_component__root"> 28 Sales </div> <div class="shared-item_cards-list-image_card_component__lastUpdated shared-item_cards-list-image_card_component__tinyText"> Last updated: 10 Mar 18 </div> </div> <div class="shared-item_cards-list-image_card_component__coverWrapper"> <a class="shared-item_cards-add_to_cart_button_component__root shared-item_cards-add_to_cart_button_component__compact" role="button" title="Add to cart" aria-label="Add to cart" href="/cart/configure_before_adding/21558172" rel="nofollow" data-controller="cart-button modal-commander add-to-cart-event" data-action="click->modal-commander#open cartStoreUpdated@window->cart-button#updateFromStore click->add-to-cart-event#sendEvent" data-modal-commander-url-value="/my/cart_entries?item_id=21558172" data-modal-commander-method-value="POST" data-cart-button-item-id-value="21558172" data-cart-button-in-cart-class="shared-item_cards-add_to_cart_button_component__inCart" data-analytics-cart-button-payload="{"eventName":"add_to_cart","eventType":"user","quantityUpdate":false,"ecommerce":{"currency":"USD","value":"5.00","items":[{"affiliation":"codecanyon","itemId":21558172,"itemName":"CARD - CSS3 Portfolio Cards with Hover Effects","itemBrand":"krsankarkr","itemCategory":"css","itemCategory2":"animations-and-effects","itemCategory3":null,"price":"5.00","quantity":1}]}}" > <span class="shared-item_cards-add_to_cart_button_component__cartIcon"> <svg width='100%' height='100%'> <use xlink:href='/storefront/assets/icon_spritesheet-2c8173174a30370958101e9b5e0dc4a0503c16573b4e2c0961245849681b052e.svg#cart'></use> </svg> </span> </a> <a href="https://codecanyon.net/item/card-css3-portfolio-cards-with-hover-effects/full_screen_preview/21558172" class="shared-item_cards-preview_button_with_analytics_component__root" target="_blank" rel="noopener" > Live Preview </a> </div> </div> </div> </div> </div> </div> <nav class="search-controls-pagination_nav_component__root" aria-label="pagination"> <ul class="search-controls-pagination_nav_component__list"> <li class="search-controls-pagination_nav_component__listItem"> <a class="search-controls-pagination_nav_component__pageLink search-controls-pagination_nav_component__currentPage" rel="nofollow" title="Page 1" href="/category/css/animations-and-effects#content">1</a> </li> <li class="search-controls-pagination_nav_component__listItem"> <a class="search-controls-pagination_nav_component__pageLink" rel="nofollow" title="Page 2" href="/category/css/animations-and-effects?page=2#content">2</a> </li> <li class="search-controls-pagination_nav_component__listItem"> <a class="search-controls-pagination_nav_component__pageLink" rel="nofollow" title="Page 3" href="/category/css/animations-and-effects?page=3#content">3</a> </li> <li class="search-controls-pagination_nav_component__listItem"> <a class="search-controls-pagination_nav_component__pageLink" rel="nofollow" title="Page 4" href="/category/css/animations-and-effects?page=4#content">4</a> </li> <li class="search-controls-pagination_nav_component__listItem"> <a class="search-controls-pagination_nav_component__pageLink" rel="nofollow" title="Page 5" href="/category/css/animations-and-effects?page=5#content">5</a> </li> <li class="search-controls-pagination_nav_component__listItem"> <a class="search-controls-pagination_nav_component__pageLink" rel="nofollow" title="Page 6" href="/category/css/animations-and-effects?page=6#content">6</a> </li> <li class="search-controls-pagination_nav_component__listItem"> <a class="search-controls-pagination_nav_component__pageLink" rel="nofollow" title="Page 7" href="/category/css/animations-and-effects?page=7#content">7</a> </li> <li class="search-controls-pagination_nav_component__listItem"> <a class="search-controls-pagination_nav_component__pageLink" rel="nofollow" title="Page 8" href="/category/css/animations-and-effects?page=8#content">8</a> </li> <li class="search-controls-pagination_nav_component__listItem"> <a class="search-controls-pagination_nav_component__arrowLink search-controls-pagination_nav_component__arrowRight" rel="nofollow" title="Next page" href="/category/css/animations-and-effects?page=2#content"> <span class="search-controls-pagination_nav_component__chevronWrapper"> <svg width='100%' height='100%'> <use xlink:href='/storefront/assets/icon_spritesheet-2c8173174a30370958101e9b5e0dc4a0503c16573b4e2c0961245849681b052e.svg#chevron_left'></use> </svg> </span> </a> </li> </ul> </nav> </div> </main> </div> <div class="search-bottom_article_component__root"> <div class="shared-article_content_component__root"> <h2>CSS animations and how to use them</h2> <p><strong>CSS animations are cropping up everywhere</strong>. It seems as though every website you visit has some cool effect happening when you’re scrolling down the page or hovering your mouse over the logo. No matter what kind of business or website it is, there’s always an opportunity to add a CSS animation in for some added wow-factor. And you know what—adding these little bits of style to your website doesn’t have to be difficult! In fact, you can even get them already written for you. </p> <p>However, there is an art to picking the right CSS animation for your project. If you’re building a website for a hospital you’ll definitely have different requirements from a children's after-school club. <strong>Use code that’s relevant to your project</strong>: it’s easy to add 20 different animations to the site and just change the class of an element so that a specific animation targets it. But adding irrelevant code can seriously slow down your website and impact other areas too. Plus, we don’t really need to tell you that a spinning logo can look great if you’re creating a website for a children’s entertainer… But not so great if it’s for a law firm. </p> <p>But don’t worry—<strong>we can help</strong>. Browse through categories and subcategories and get some inspiration—there’s plenty to see! And want to know something really great about CSS animations? They’re <strong>cross-browser friendly</strong>. CSS works on all web browsers, big or small. There is no risk of the code not appearing properly—provided you use a couple of tricks to make sure Internet Explorer plays ball ;) </p> <p>So <strong>why should you use CSS animations?</strong> Quite simply, they add a little more to your website than just changing the color of the font or the text size. Having an element of the interface fade in to suggest the beginning of a process, or adding color to an image when the mouse is hovered over, can have a huge impact on a user’s experience of the website. All this also contributes to communicating your brand through style and look. </p> <p>Tuts+ contributor Andrew Blackman has highlighted a number of <a href="https://webdesign.tutsplus.com/articles/popular-courses-on-css-animation--cms-27166">popular courses on CSS animation</a>. This is a great resource if you want to learn how to do it yourself and have a little time to spare to go through this awesome list. However, if you’re just looking for a quick fix or something that’s <strong>been quality checked</strong>, then you’re in the right place—we have a huge selection of CSS animation snippets ready to use! </p> <p><strong>Dive deeper into CSS</strong>.</p> <p>You shouldn’t just stop there. If you’re keen on learning a little more about CSS and building your own website, then why not read one of the <a href="https://webdesign.tutsplus.com/categories/css">CSS tutorials</a> available and start showing off your skills? You could even submit something to CodeCanyon and start earning your own money from a CSS snippet that people need! </p> </div> </div> <div class="search-index_content__relatedPosts"> <section class="search-related_posts_component__root"> <article class="search-related_posts_component__tile" aria-label="20 Snippets for Things You Never Thought were Possible with CSS"> <header class="search-related_posts_component__header"> <a class="search-related_posts_component__previewLink" href="https://envato.com/blog/snippets-css/" > <img class="search-related_posts_component__postImage" alt="20 Snippets for Things You Never Thought were Possible with CSS" src="https://assets.shopfront.envato-static.com/page-content/images/related-posts/post-images/20-snippets-for-things-you-never-thought-were-possible-with-css.jpg" width="240" height="160" loading="lazy" /> </a> </header> <a class= search-related_posts_component__titleLink href="https://envato.com/blog/snippets-css/" > <h2 class="search-related_posts_component__title" >20 Snippets for Things You Never Thought were Possible with CSS</h2> </a> <div class="search-related_posts_component__teaser"> <p class="search-related_posts_component__teaserText"> These free code snippets are perfect for anyone who wants to forge ahead into the wilderness of cutting edge CSS techniques. </p> </div> <footer class="search-related_posts_component__footer"> <img class="search-related_posts_component__authorPhoto" alt="Jake Rocheleau" src="https://assets.shopfront.envato-static.com/page-content/images/related-posts/author-images/jake-rocheleau.jpg" width="32" height="32" loading="lazy" /> <div class="search-related_posts_component__publicationInfo"> <a class="search-related_posts_component__authorName" href="https://envato.com/blog/author/jake-rocheleau/" > Jake Rocheleau </a> 17 Aug 16 </div> <a class="search-related_posts_component__postCategory" href="https://envato.com/blog/category/business/" > Business </a> </footer> </article> <article class="search-related_posts_component__tile" aria-label="25 Free Web-Based Apps & Tools For Working With CSS"> <header class="search-related_posts_component__header"> <a class="search-related_posts_component__previewLink" href="https://envato.com/blog/free-web-based-apps-tools-css/" > <img class="search-related_posts_component__postImage" alt="25 Free Web-Based Apps & Tools For Working With CSS" src="https://assets.shopfront.envato-static.com/page-content/images/related-posts/post-images/25-free-web-based-apps--tools-for-working-with-css.jpg" width="240" height="160" loading="lazy" /> </a> </header> <a class= search-related_posts_component__titleLink href="https://envato.com/blog/free-web-based-apps-tools-css/" > <h2 class="search-related_posts_component__title" >25 Free Web-Based Apps & Tools For Working With CSS</h2> </a> <div class="search-related_posts_component__teaser"> <p class="search-related_posts_component__teaserText"> The best web-based CSS apps for your website. </p> </div> <footer class="search-related_posts_component__footer"> <img class="search-related_posts_component__authorPhoto" alt="Paul Andrew" src="https://assets.shopfront.envato-static.com/page-content/images/related-posts/author-images/paul-andrew.jpg" width="32" height="32" loading="lazy" /> <div class="search-related_posts_component__publicationInfo"> <a class="search-related_posts_component__authorName" href="https://envato.com/blog/author/apaulandrew/" > Paul Andrew </a> 19 Jan 17 </div> <a class="search-related_posts_component__postCategory" href="https://envato.com/blog/category/trends/" > Trends </a> </footer> </article> <article class="search-related_posts_component__tile" aria-label="Exploring the Latest CSS Animation Trends in Web Design"> <header class="search-related_posts_component__header"> <a class="search-related_posts_component__previewLink" href="https://envato.com/blog/css-animation-trends-in-web-design/" > <img class="search-related_posts_component__postImage" alt="Exploring the Latest CSS Animation Trends in Web Design" src="https://assets.shopfront.envato-static.com/page-content/images/related-posts/post-images/exploring-the-latest-css-animation-trends-in-web-design.jpg" width="240" height="160" loading="lazy" /> </a> </header> <a class= search-related_posts_component__titleLink href="https://envato.com/blog/css-animation-trends-in-web-design/" > <h2 class="search-related_posts_component__title" >Exploring the Latest CSS Animation Trends in Web Design</h2> </a> <div class="search-related_posts_component__teaser"> <p class="search-related_posts_component__teaserText"> These trends explore the current era in website animation. While JS is a fantastic language, CSS has become easier and heavily supported by the design community... </p> </div> <footer class="search-related_posts_component__footer"> <img class="search-related_posts_component__authorPhoto" alt="Jake Rocheleau" src="https://assets.shopfront.envato-static.com/page-content/images/related-posts/author-images/jake-rocheleau.jpg" width="32" height="32" loading="lazy" /> <div class="search-related_posts_component__publicationInfo"> <a class="search-related_posts_component__authorName" href="https://envato.com/blog/author/jake-rocheleau/" > Jake Rocheleau </a> 14 Aug 16 </div> <a class="search-related_posts_component__postCategory" href="https://envato.com/blog/category/trends/" > Trends </a> </footer> </article> </section> </div> </div> </div> <div class="shared-global_footer-cross_sell_component__root" data-nosnippet> <div class="shared-global_footer-cross_sell_banner_component__root" data-impression-tracker-target="promotion" data-analytics-view-payload="{"eventName":"view_promotion","eventType":"user","contextDetail":"footer block ads","ecommerce":{"promotionId":"elements_mkt-footer_28AUG2024","promotionName":"elements_mkt-footer_28AUG2024","promotionType":"elements referral"}}" data-analytics-click-payload="{"eventName":"select_promotion","eventType":"user","contextDetail":"footer block ads","ecommerce":{"promotionId":"elements_mkt-footer_28AUG2024","promotionName":"elements_mkt-footer_28AUG2024","promotionType":"elements referral"}}" data-analytics-click-once="true" > <div class="shared-global_footer-cross_sell_banner_component__mainPanel"> <a class="shared-global_footer-cross_sell_banner_component__mainPanelLink" href="https://elements.envato.com/?utm_campaign=elements_mkt-footer_28AUG2024&utm_medium=promos&utm_source=codecanyon.net&utm_content=cc_global-footer" target="_blank" > <div> <img class="shared-global_footer-cross_sell_banner_component__elementsLogo" loading="lazy" src="https://assets.market-storefront.envato-static.com/storefront/assets/logos/envato-elements-e1a82c06abeaebefed5ef0159102a06cd996de649ea62018b395978c09cd1edc.svg" alt="Elements logo"> </div> <div class="shared-global_footer-cross_sell_banner_component__mainPanelLinkContainer"> <div class="shared-global_footer-cross_sell_banner_component__mainPanelLinkHeading"> <h2 class="shared-brand_neue-text_component__root shared-brand_neue-text_component__title3 shared-brand_neue-text_component__contentPrimary"> Looking for unlimited downloads? </h2> </div> <div class="shared-global_footer-cross_sell_banner_component__mainPanelLinkSubheading"> <span class="shared-brand_neue-text_component__root shared-brand_neue-text_component__bodySmall shared-brand_neue-text_component__contentPrimary"> Subscribe to Envato Elements. </span> </div> <div class="shared-global_footer-cross_sell_banner_component__mainPanelLinkDescriptionContainer"> <div class="shared-global_footer-cross_sell_banner_component__mainPanelLinkDescription"> <img class="shared-brand_neue-icon_component__root shared-brand_neue-icon_component__size20" src="https://assets.market-storefront.envato-static.com/storefront/assets/icons/badge-ea3a60ea39171409e4f531bab81dc0a0f23d5ab62c5bbc2160599b766c5803dd.svg" alt="badge" > <span class="shared-brand_neue-text_component__root shared-brand_neue-text_component__bodySmall shared-brand_neue-text_component__contentPrimary"> Millions of premium assets </span> </div> <div class="shared-global_footer-cross_sell_banner_component__mainPanelLinkDescription"> <img class="shared-brand_neue-icon_component__root shared-brand_neue-icon_component__size20" src="https://assets.market-storefront.envato-static.com/storefront/assets/icons/thumbs_up-3314bbeb196f5f1858b98256fe14b1bbe632f6b4077d311139e8173f3cfc2945.svg" alt="thumbs up" > <span class="shared-brand_neue-text_component__root shared-brand_neue-text_component__bodySmall shared-brand_neue-text_component__contentPrimary"> Great value subscription </span> </div> </div> </div> </a> <a rel="noopener" target="_blank" class="shared-brand_neue-button_link_component__root shared-brand_neue-button_link_component__banner" href="https://elements.envato.com/?utm_campaign=elements_mkt-footer_28AUG2024&utm_medium=promos&utm_source=codecanyon.net&utm_content=cc_global-footer"> <div class="shared-global_footer-cross_sell_banner_component__ctaButton"> <span class="shared-brand_neue-text_component__root shared-brand_neue-text_component__labelSmall shared-brand_neue-text_component__contentPrimary"> Start creating now </span> <img class="shared-brand_neue-icon_component__root shared-brand_neue-icon_component__size14" src="https://assets.market-storefront.envato-static.com/storefront/assets/icons/open_in_new-235ba8f2a9a16ac0776b9a33ffaa20b59f6f5454ee41ef5bac6e83437b6d8482.svg" alt="open elements" > </div> </a> </div> <div class="shared-global_footer-cross_sell_banner_component__secondaryPanel"> <a href="https://elements.envato.com/?utm_campaign=elements_mkt-footer_28AUG2024&utm_medium=promos&utm_source=codecanyon.net&utm_content=cc_global-footer" target="_blank" > <img loading="lazy" src="https://assets.market-storefront.envato-static.com/storefront/assets/footer/cross-sell-elements-1x-303b2bb0b8c75605b02b6664246ef38432c56a6da4c00e6901ecec5445d91cbe.png" srcset="https://assets.market-storefront.envato-static.com/storefront/assets/footer/cross-sell-elements-2x-e85119863b8b440668790657b87d312db6a54db6548dcaf29eb082b480f82f7a.png 2x" alt="Collage of Elements items" > </a> </div> </div> </div> <footer class="shared-global_footer-footer_component__root" data-turbo="false"> <div class="shared-global_footer-footer_component__topContainer"> <div class="shared-global_footer-footer_component__topLinks" data-controller="cookie-settings"> <nav class="shared-global_footer-footer_component__topLinksGroup" aria-label="Envato Market"> <strong class="shared-global_footer-footer_component__topLinksGroupTitle">Envato Market</strong> <a class="shared-global_footer-footer_component__topLink" href="/legal/market"> Terms </a> <a class="shared-global_footer-footer_component__topLink" href="/licenses"> Licenses </a> <a class="shared-global_footer-footer_component__topLink" href="https://build.envato.com"> Market API </a> <a class="shared-global_footer-footer_component__topLink" href="https://envato.com/market/affiliate-program"> Become an affiliate </a> <a class="shared-global_footer-footer_component__topLink" href="https://www.envato.com/cookies/"> Cookies </a> <button type="button" id="cookie-settings" class="shared-global_footer-footer_component__topLink">Cookie Settings</button> </nav> <nav class="shared-global_footer-footer_component__topLinksGroup" aria-label="Help"> <strong class="shared-global_footer-footer_component__topLinksGroupTitle">Help</strong> <a class="shared-global_footer-footer_component__topLink" href="https://help.market.envato.com"> Help Center </a> <a class="shared-global_footer-footer_component__topLink" href="https://help.author.envato.com/hc/en-us"> Authors </a> </nav> <nav class="shared-global_footer-footer_component__topLinksGroup" aria-label="Our Community"> <strong class="shared-global_footer-footer_component__topLinksGroupTitle">Our Community</strong> <a class="shared-global_footer-footer_component__topLink" href="http://community.envato.com"> Community </a> <a class="shared-global_footer-footer_component__topLink" href="https://envato.com/blog"> Blog </a> <a class="shared-global_footer-footer_component__topLink" href="https://forums.envato.com"> Forums </a> <a class="shared-global_footer-footer_component__topLink" href="http://community.envato.com/#/events"> Meetups </a> </nav> <nav class="shared-global_footer-footer_component__topLinksGroup" aria-label="Meet Envato"> <strong class="shared-global_footer-footer_component__topLinksGroupTitle">Meet Envato</strong> <a class="shared-global_footer-footer_component__topLink" href="https://envato.com"> About Envato </a> <a class="shared-global_footer-footer_component__topLink" href="http://careers.envato.com"> Careers </a> <a class="shared-global_footer-footer_component__topLink" href="https://envato.com/privacy/"> Privacy Policy </a> <a class="shared-global_footer-footer_component__topLink" href=" https://www.envato.com/privacy/#my-personal-information"> Do not sell or share my personal information </a> <a class="shared-global_footer-footer_component__topLink" href="https://envato.com/sitemap/"> Sitemap </a> </nav> </div> <div class="shared-global_footer-footer_component__topStats"> <div class="shared-global_footer-footer_component__topStatsMeta"> <img loading="lazy" class="shared-global_footer-footer_component__logo" alt="Envato Market" height="20" src="https://assets.market-storefront.envato-static.com/storefront/assets/logos/envato-market-0c6ef0bdbf918a098bf915273cd4ca39cb1afd7992deef185dafe33b2c623b2f.svg" /> <ul class="shared-global_footer-footer_component__statsList"> <li class="shared-global_footer-footer_component__statsListItem"> <span class="shared-global_footer-footer_component__stats">76,339,762</span> items sold </li> <li class="shared-global_footer-footer_component__statsListItem"> <span class="shared-global_footer-footer_component__stats">$1,188,901,282</span> community earnings </li> </ul> </div> <div class="shared-global_footer-footer_component__bottomBCorp"> <a href="https://bcorporation.net/en-us/find-a-b-corp/company/envato" class="shared-global_footer-footer_component__bcorpLink" target="_blank" rel="noopener"> <img loading="lazy" width="50" height="84" alt="B Corp logo" class="shared-global_footer-footer_component__bcorpLogo" src="https://assets.market-storefront.envato-static.com/storefront/assets/logos/bcorp-fbdd18d9fd7274a0e6591e67408e26c55df20358c3c4eee496117b16874e1749.svg" /> </a> </div> </div> </div> <div class="shared-global_footer-footer_component__bottomContainer"> <nav class="shared-global_footer-footer_component__bottomSocial" itemscope itemtype="http://schema.org/Organization" aria-label="social"> <a class="shared-global_footer-footer_component__socialLink" rel="nofollow" aria-label="Twitter" href="https://twitter.com/envato"> <img loading="lazy" alt="Twitter" title="Twitter" src="https://assets.market-storefront.envato-static.com/storefront/assets/social-icons/icon-twitter-6ad889010d07b5b6caa1e8c40d71131641bb97d9605ef8ef62d8cfe8ace6a817.svg" width="22" height="22" /></a> <a class="shared-global_footer-footer_component__socialLink" rel="nofollow" aria-label="Facebook" href="https://www.facebook.com/envato"> <img loading="lazy" alt="Facebook" title="Facebook" src="https://assets.market-storefront.envato-static.com/storefront/assets/social-icons/icon-facebook-e29111786aec8117c019d01a351887605c22c29dd9c363b355789c06436aaf2f.svg" width="22" height="22" /></a> <a class="shared-global_footer-footer_component__socialLink" rel="nofollow" aria-label="YouTube" href="https://www.youtube.com/user/Envato"> <img loading="lazy" alt="YouTube" title="YouTube" src="https://assets.market-storefront.envato-static.com/storefront/assets/social-icons/icon-youtube-6a45b3f582b34fb83cf3d2a4600f50f0c4431309a4434f853eac416be16aa37c.svg" width="22" height="22" /></a> <a class="shared-global_footer-footer_component__socialLink" rel="nofollow" aria-label="Instagram" href="https://www.instagram.com/envato/"> <img loading="lazy" alt="Instagram" title="Instagram" src="https://assets.market-storefront.envato-static.com/storefront/assets/social-icons/icon-instagram-614e390114cada173d0094549cb1f260929b6432d3a1e6cff484302e4aabba09.svg" width="22" height="22" /></a> <a class="shared-global_footer-footer_component__socialLink" rel="nofollow" aria-label="Pinterest" href="https://www.pinterest.com/envato/"> <img loading="lazy" alt="Pinterest" title="Pinterest" src="https://assets.market-storefront.envato-static.com/storefront/assets/social-icons/icon-pinterest-bb3b4207aa129cfef2e6fc210119c48c132ddb3a3a0c4c06c0acc128201128b7.svg" width="22" height="22" /></a> </nav> <div class="shared-global_footer-footer_component__bottomLinks"> <nav class="shared-global_footer-footer_component__companyLinks" aria-label="company"> <a class="shared-global_footer-footer_component__companyLink" href="https://envato.com">Envato.com</a> <a class="shared-global_footer-footer_component__companyLink" data-impression-tracker-target="promotion" data-analytics-view-payload="{"eventName":"view_promotion","eventType":"user","contextDetail":"footer nav","ecommerce":{"promotionId":"elements_mkt-footernav","promotionName":"elements_mkt-footernav","promotionType":"elements referral"}}" data-analytics-click-payload="{"eventName":"select_promotion","eventType":"user","contextDetail":"footer nav","ecommerce":{"promotionId":"elements_mkt-footernav","promotionName":"elements_mkt-footernav","promotionType":"elements referral"}}" href="https://elements.envato.com?utm_campaign=elements_mkt-footernav">Envato Elements</a> <a class="shared-global_footer-footer_component__companyLink" href="https://placeit.net">Placeit by Envato</a> <a class="shared-global_footer-footer_component__companyLink" href="https://tutsplus.com">Envato Tuts+</a> <a class="shared-global_footer-footer_component__companyLink" href="https://envato.com/products">All Products</a> <a class="shared-global_footer-footer_component__companyLink" href="https://envato.com/sitemap/">Sitemap</a> </nav> <div class="shared-global_footer-footer_component__notice"> Price is in US dollars and excludes tax and handling fees </div> <div class=shared-global_footer-footer_component__copyrights > © 2024 Envato Pty Ltd. Trademarks and brands are the property of their respective owners. </div> </div> </div> </footer> <div class="shared-modal_component__overlay" data-controller="modal" data-modal-target="overlay" data-modal-noscroll-class="shared-modal_component__noscroll" data-modal-open-class="shared-modal_component__overlayOpen" data-modal-loading-hidden-class="shared-modal_component__hidden" data-action="command:modal:open@window->modal#open command:modal:close@window->modal#close"> <div class="shared-modal_component__mask" data-modal-target="mask" data-action="click->modal#close"></div> <div data-modal-target="loading" class="shared-modal_component__loading"> <svg class="shared-spinner_component__spinner shared-spinner_component__large" viewBox="0 0 66 66" xmlns="http://www.w3.org/2000/svg"> <circle class="shared-spinner_component__path" fill="none" stroke-width="6" stroke-linecap="round" cx="33" cy="33" r="30"> </circle> </svg> </div> <div data-modal-target="content" class="shared-modal_component__content" tabindex="-1" aria-label="Modal"></div> </div> <div data-nosnippet id="market-banner" data-controller="banner" data-action="click->banner#click CookiebotOnAccept@window->banner#handleCookieBotConsent" data-banner-show-class="shared-banner_component__visibleTop" data-banner-data-value="{"banners":[{"id":"market_mkt-header_cybersale_20Nov2024","html":"\u003cdiv class=\"headerstrip-wrapper\"\u003e\n \u003ca class=\"headerstrip js-banner__link\" href=\"https://codecanyon.net/search?discounted_only=1\u0026amp;discount_type=envato\" target=\"_blank\" rel=\"noopener noreferrer\"\u003e\n \u003cdiv class=\"headerstrip-content-background\"\u003e\u003c/div\u003e\n \u003cdiv class=\"headerstrip-content-wrapper\"\u003e\n \u003cdiv class=\"headerstrip-canvas is-hidden-desktop\"\u003e\n \u003cdiv class=\"headerstrip-content\"\u003e\n \u003cdiv class=\"headerstrip-text\"\u003e\n \u003cstrong\u003eCyber Sale!\u003c/strong\u003e \n \u003cspan class=\"js-banner__link headerstrip-cta-mobile\" href=\"https://codecanyon.net/search?discounted_only=1\u0026amp;discount_type=envato\"\u003eUp to 50% Off\u003c/span\u003e\n \u003c/div\u003e\n \u003c/div\u003e\n \u003c/div\u003e\n \u003cdiv class=\"headerstrip-canvas is-hidden-tablet-and-below\"\u003e\n \u003cdiv class=\"headerstrip-content\"\u003e\n \u003cdiv class=\"headerstrip-text\"\u003e\n \u003cstrong\u003eCyber Sale! Up to 50% off \u003c/strong\u003e best-selling WordPress plugins, PHP scripts \u0026 more\n \u003c/div\u003e\n \u003cspan class=\"js-banner__link headerstrip-cta\" href=\"https://codecanyon.net/search?discounted_only=1\u0026amp;discount_type=envato\"\u003eSave up to 50%\u003c/span\u003e\n \u003c/div\u003e\n \u003c/div\u003e\n \u003c/div\u003e\n \u003c/a\u003e\n\u003c/div\u003e\n","css":".headerstrip-wrapper {\n height: 50px;\n position: relative;\n}\n\n.headerstrip-wrapper .headerstrip__banner-dismiss {\n width: 12px;\n height: 12px;\n background: none;\n border: none;\n -webkit-box-sizing: content-box;\n -moz-box-sizing: content-box;\n box-sizing: content-box;\n padding: 0;\n position: absolute;\n font: inherit;\n height: 100%;\n line-height: 0;\n cursor: pointer;\n outline: inherit;\n opacity: 0.4;\n padding: 0 16px;\n color: white;\n text-decoration: none;\n -webkit-transition: all 100ms ease;\n -moz-transition: all 100ms ease;\n -o-transition: all 100ms ease;\n transition: all 100ms ease;\n right: 0;\n top: 0;\n z-index: 2;\n}\n\n.headerstrip-wrapper .headerstrip__banner-dismiss:hover {\n -webkit-transform: scale(1.3);\n transform: scale(1.3);\n}\n\n.headerstrip-wrapper .headerstrip__banner-dismiss svg {\n fill: #000000;\n}\n\n.headerstrip {\n display: block;\n height: 50px;\n font-family: PolySans-Neutral, arial;\n font-size: 14px;\n position: relative;\n text-decoration: none !important;\n z-index: 1;\n}\n\n.headerstrip .headerstrip-content-background {\n background-color: #fff;\n opacity: 1;\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n z-index: 1;\n background: #9CEE69; /* For browsers that do not support gradients */\n background: -webkit-linear-gradient(left, #9CEE69, #9CEE69); /* For Safari 5.1 to 6.0 */\n background: linear-gradient(to right, #9CEE69, #9CEE69); /* Standard syntax */\n background-repeat: repeat-x;\n}\n\n.headerstrip .headerstrip-canvas {\n height: 50px;\n margin: auto auto;\n}\n\n.headerstrip .headerstrip-content-wrapper {\n margin: 0 auto;\n position: relative;\n z-index: 2;\n}\n\n.headerstrip .headerstrip-content {\n display: flex;\n align-items: center;\n justify-content: center;\n background-size: contain;\n background-repeat: no-repeat;\n background-size: 1000px 50px;\n width: 100%;\n height: 50px;\n max-width: 1408px;\n padding-left: 16px;\n padding-right: 16px;\n margin: 0 auto;\n}\n\n.headerstrip .headerstrip-text {\n color: #000000;\n text-decoration: none;\n padding-right: 24px;\n font-weight: 300;\n letter-spacing: 0.8px;\n position: relative;\n}\n\n.headerstrip .headerstrip-text strong {\n font-family: PolySans-Median, arial;\n}\n\n.headerstrip .headerstrip-cta-container {\n display: flex;\n}\n\n.headerstrip .headerstrip-cta {\n font-family: PolySans-Median, arial;\n position: relative;\n background-color: #B037A6;\n padding: 6px 30px 5px 30px;\n color: #FFFFFF;\n border-radius: 4px;\n text-decoration: none;\n display: block;\n text-align: center;\n min-width: 100px;\n}\n\n.headerstrip .headerstrip-cta-mobile {\n color: #000000;\n text-decoration: underline;\n padding-left: 5px;\n}\n\n.headerstrip .headerstrip-cta-mobile:hover {\n color: #000000;\n}\n\n\n.headerstrip .is-hidden-desktop .headerstrip-content {\n text-align: center;\n}\n\n.headerstrip .is-hidden-desktop .headerstrip-text {\n position: relative;\n padding-right: 24px;\n}\n\n.headerstrip .is-hidden-desktop .headerstrip__banner-dismiss {\n margin-left: 0;\n}\n\n.headerstrip .headerstrip__dismiss-icon {\n width: 12px;\n height: 12px;\n fill: #000000;\n display: inline-block;\n}\n\n@media (max-width: 1024px) {\n .headerstrip .is-hidden-tablet-and-below {\n display: none !important;\n }\n}\n\n@media (min-width: 1025px) {\n .headerstrip .is-hidden-desktop {\n display: none !important\n }\n\n .headerstrip .headerstrip-content-wrapper {\n max-width: 1408px\n }\n}\n","categories":[]}]}" data-banner-category-value="css" > <style type="text/css" data-banner-target="css"></style> <div class="shared-banner_component__bannerTop" data-banner-target="html" data-impression-tracker-target="promotion" data-analytics-view-payload="{"eventName":"view_promotion","eventType":"user","contextDetail":"referral bar","ecommerce":{"promotionId":"market_mkt-header_cybersale_20Nov2024","promotionName":"market_mkt-header_cybersale_20Nov2024","promotionType":"commercial"}}" data-analytics-click-payload="{"eventName":"select_promotion","eventType":"user","contextDetail":"referral bar","ecommerce":{"promotionId":"market_mkt-header_cybersale_20Nov2024","promotionName":"market_mkt-header_cybersale_20Nov2024","promotionType":"commercial"}}" ></div> </div> <div data-controller="cart-entries-loader" data-cart-entries-loader-url-value="/my/cart_entries"></div> </body> </html>

CINXE.COM

CSS Animations from CodeCanyon