CodePen Embed - Expandable Animated Card Slider

Live

This Pen is owned by Yudiz Solutions Limited on CodePen.

External CSS

External JavaScript

{"__browser":{"country":"US","device":"unknown_device","mobile":false,"name":"unknown browser","platform":"unknown_platform","version":"0"},"__constants":{},"__CPDATA":{"domain_iframe":"https://cdpn.io","environment":"production","host":"codepen.io","iframe_allow":"accelerometer *; ambient-light-sensor *; camera *; display-capture *; encrypted-media *; geolocation *; gyroscope *; microphone *; midi *; payment *; serial *; vr *; web-share *; xr-spatial-tracking *","iframe_sandbox":"allow-downloads allow-forms allow-modals allow-pointer-lock allow-popups allow-popups-to-escape-sandbox allow-presentation allow-same-origin allow-scripts allow-top-navigation-by-user-activation"},"__graphql":{"data":{"errors":[{"message":"Cannot return null for non-nullable field Query.sessionUser"}],"data":null},"url":"https://codepen.io/graphql","api":"cprails"},"__pay_stripe_public_key":"pk_live_2GndomDfiklqpSNQn8FrGuwZSMIMzha7DkLJqlYe7IR0ihKAlKdiHg68JJc5eVPt68rzAjzAAVXcUwjySHRCsgjQQ00gtRBUFNH","__pay_braintree_env":"production","__boomboom":{"serve_url":"https://cdpn.io/cpe/boomboom","store_url":"https://codepen.io/cpe/boomboom/store"},"__pageType":"embed","__item":"{\"editor_settings\":{\"auto_run\":true,\"autocomplete\":false,\"code_folding\":true,\"css_pre_processor\":\"none\",\"css_prefix\":\"neither\",\"css_starter\":\"neither\",\"emmet_active\":true,\"font_size\":14,\"font_type\":\"system\",\"format_on_save\":false,\"html_pre_processor\":\"none\",\"indent_with\":\"spaces\",\"js_pre_processor\":\"none\",\"key_bindings\":\"normal\",\"line_numbers\":true,\"line_wrapping\":true,\"match_brackets\":true,\"snippets\":{\"markupSnippets\":{},\"stylesheetSnippets\":{}},\"tab_size\":2,\"theme\":\"twilight\",\"id\":\"wvzrPoj\",\"auto_save\":true},\"hashid\":\"wvzrPoj\",\"itemType\":\"pen\",\"resources\":[{\"url\":\"https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css\",\"order\":0,\"resource_type\":\"css\",\"par_content\":\"\"},{\"url\":\"https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js\",\"order\":0,\"resource_type\":\"js\",\"par_content\":\"\"},{\"url\":\"https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css\",\"order\":1,\"resource_type\":\"css\",\"par_content\":\"\"},{\"url\":\"https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js\",\"order\":1,\"resource_type\":\"js\",\"par_content\":\"\"},{\"url\":\"https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.css\",\"order\":2,\"resource_type\":\"css\",\"par_content\":\"\"}],\"tags\":[\"animated-card\",\"expandable-card\",\"variable-width-slider\",\"cpc-hide-reveal\",\"codepenchallenge\"],\"id\":49179557,\"user_id\":5491639,\"html\":\"<section class=\\\"game-section\\\">\\n  <h2 class=\\\"line-title\\\">trending games</h2>\\n  <div class=\\\"owl-carousel custom-carousel owl-theme\\\">\\n    <div class=\\\"item active\\\" style=\\\"background-image: url(https://www.yudiz.com/codepen/expandable-animated-card-slider/dota-2.jpg);\\\">\\n      <div class=\\\"item-desc\\\">\\n        <h3>Dota 2</h3>\\n        <p>Dota 2 is a multiplayer online battle arena by Valve. The game is a sequel to Defense of the\\n          Ancients, which was a community-created mod for Blizzard Entertainment's Warcraft III.</p>\\n      </div>\\n    </div>\\n    <div class=\\\"item\\\" style=\\\"background-image: url(https://www.yudiz.com/codepen/expandable-animated-card-slider/winter-3.jpg);\\\">\\n      <div class=\\\"item-desc\\\">\\n        <h3>The Witcher 3</h3>\\n        <p>The Witcher 3 is a multiplayer online battle arena by Valve. The game is a sequel to Defense\\n          of the Ancients, which was a community-created mod for Blizzard Entertainment's Warcraft III.</p>\\n      </div>\\n    </div>\\n    <div class=\\\"item\\\" style=\\\"background-image: url(https://www.yudiz.com/codepen/expandable-animated-card-slider/rdr-2.jpg);\\\">\\n      <div class=\\\"item-desc\\\">\\n        <h3>RDR 2</h3>\\n        <p>RDR 2 is a multiplayer online battle arena by Valve. The game is a sequel to Defense of the\\n          Ancients, which was a community-created mod for Blizzard Entertainment's Warcraft III.</p>\\n      </div>\\n    </div>\\n    <div class=\\\"item\\\" style=\\\"background-image: url(https://www.yudiz.com/codepen/expandable-animated-card-slider/pubg.jpg);\\\">\\n      <div class=\\\"item-desc\\\">\\n        <h3>PUBG Mobile</h3>\\n        <p>PUBG 2 is a multiplayer online battle arena by Valve. The game is a sequel to Defense of the\\n          Ancients, which was a community-created mod for Blizzard Entertainment's Warcraft III.</p>\\n      </div>\\n    </div>\\n    <div class=\\\"item\\\" style=\\\"background-image: url(https://www.yudiz.com/codepen/expandable-animated-card-slider/fortnite.jpg);\\\">\\n      <div class=\\\"item-desc\\\">\\n        <h3>Fortnite</h3>\\n        <p>Battle royale where 100 players fight to be the last person standing. which was a community-created mod\\n          for Blizzard Entertainment's Warcraft III.</p>\\n      </div>\\n    </div>\\n    <div class=\\\"item\\\" style=\\\"background-image: url(https://www.yudiz.com/codepen/expandable-animated-card-slider/far-cry-5.jpg);\\\">\\n      <div class=\\\"item-desc\\\">\\n        <h3>Far Cry 5</h3>\\n        <p>Far Cry 5 is a 2018 first-person shooter game developed by Ubisoft.\\n          which was a community-created mod for Blizzard Entertainment's Warcraft III.</p>\\n      </div>\\n    </div>\\n  </div>\\n  </div>\\n</section>\",\"css\":\"@charset \\\"utf-8\\\";\\n\\n/******* Fonts Import Start **********/\\n@import url(\\\"https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap\\\");\\n/********* Fonts Face CSS End **********/\\n\\n/******* Common Element CSS Start ******/\\n* {\\n  margin: 0px;\\n  padding: 0px;\\n}\\nbody {\\n  font-family: \\\"Roboto\\\", sans-serif;\\n  font-size: 16px;\\n}\\n.clear {\\n  clear: both;\\n}\\nimg {\\n  max-width: 100%;\\n  border: 0px;\\n}\\nul,\\nol {\\n  list-style: none;\\n}\\na {\\n  text-decoration: none;\\n  color: inherit;\\n  outline: none;\\n  transition: all 0.4s ease-in-out;\\n  -webkit-transition: all 0.4s ease-in-out;\\n}\\na:focus,\\na:active,\\na:visited,\\na:hover {\\n  text-decoration: none;\\n  outline: none;\\n}\\na:hover {\\n  color: #e73700;\\n}\\nh2 {\\n  margin-bottom: 48px;\\n  padding-bottom: 16px;\\n  font-size: 20px;\\n  line-height: 28px;\\n  font-weight: 700;\\n  position: relative;\\n  text-transform: capitalize;\\n}\\nh3 {\\n  margin: 0 0 10px;\\n  font-size: 28px;\\n  line-height: 36px;\\n}\\nbutton {\\n  outline: none !important;\\n}\\n/******* Common Element CSS End *********/\\n\\n/* -------- title style ------- */\\n.line-title {\\n  position: relative;\\n  width: 400px;\\n}\\n.line-title::before,\\n.line-title::after {\\n  content: \\\"\\\";\\n  position: absolute;\\n  bottom: 0;\\n  left: 0;\\n  height: 4px;\\n  border-radius: 2px;\\n}\\n.line-title::before {\\n  width: 100%;\\n  background: #f2f2f2;\\n}\\n.line-title::after {\\n  width: 32px;\\n  background: #e73700;\\n}\\n\\n/******* Middle section CSS Start ******/\\n/* -------- Landing page ------- */\\n.game-section {\\n  padding: 60px 50px;\\n}\\n.game-section .owl-stage {\\n  margin: 15px 0;\\n  display: flex;\\n  display: -webkit-flex;\\n}\\n.game-section .item {\\n  margin: 0 15px 60px;\\n  width: 320px;\\n  height: 400px;\\n  display: flex;\\n  display: -webkit-flex;\\n  align-items: flex-end;\\n  -webkit-align-items: flex-end;\\n  background: #343434 no-repeat center center / cover;\\n  border-radius: 16px;\\n  overflow: hidden;\\n  position: relative;\\n  transition: all 0.4s ease-in-out;\\n  -webkit-transition: all 0.4s ease-in-out;\\n  cursor: pointer;\\n}\\n.game-section .item.active {\\n  width: 500px;\\n  box-shadow: 12px 40px 40px rgba(0, 0, 0, 0.25);\\n  -webkit-box-shadow: 12px 40px 40px rgba(0, 0, 0, 0.25);\\n}\\n.game-section .item:after {\\n  content: \\\"\\\";\\n  display: block;\\n  position: absolute;\\n  height: 100%;\\n  width: 100%;\\n  left: 0;\\n  top: 0;\\n  background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 1));\\n}\\n.game-section .item-desc {\\n  padding: 0 24px 12px;\\n  color: #fff;\\n  position: relative;\\n  z-index: 1;\\n  overflow: hidden;\\n  transform: translateY(calc(100% - 54px));\\n  -webkit-transform: translateY(calc(100% - 54px));\\n  transition: all 0.4s ease-in-out;\\n  -webkit-transition: all 0.4s ease-in-out;\\n}\\n.game-section .item.active .item-desc {\\n  transform: none;\\n  -webkit-transform: none;\\n}\\n.game-section .item-desc p {\\n  opacity: 0;\\n  -webkit-transform: translateY(32px);\\n  transform: translateY(32px);\\n  transition: all 0.4s ease-in-out 0.2s;\\n  -webkit-transition: all 0.4s ease-in-out 0.2s;\\n}\\n.game-section .item.active .item-desc p {\\n  opacity: 1;\\n  -webkit-transform: translateY(0);\\n  transform: translateY(0);\\n}\\n.game-section .owl-theme.custom-carousel .owl-dots {\\n  margin-top: -20px;\\n  position: relative;\\n  z-index: 5;\\n}\\n/******** Middle section CSS End *******/\\n\\n/***** responsive css Start ******/\\n\\n@media (min-width: 992px) and (max-width: 1199px) {\\n  h2 {\\n    margin-bottom: 32px;\\n  }\\n  h3 {\\n    margin: 0 0 8px;\\n    font-size: 24px;\\n    line-height: 32px;\\n  }\\n\\n  /* -------- Landing page ------- */\\n  .game-section {\\n    padding: 50px 30px;\\n  }\\n  .game-section .item {\\n    margin: 0 12px 60px;\\n    width: 260px;\\n    height: 360px;\\n  }\\n  .game-section .item.active {\\n    width: 400px;\\n  }\\n  .game-section .item-desc {\\n    transform: translateY(calc(100% - 46px));\\n    -webkit-transform: translateY(calc(100% - 46px));\\n  }\\n}\\n\\n@media (min-width: 768px) and (max-width: 991px) {\\n  h2 {\\n    margin-bottom: 32px;\\n  }\\n  h3 {\\n    margin: 0 0 8px;\\n    font-size: 24px;\\n    line-height: 32px;\\n  }\\n  .line-title {\\n    width: 330px;\\n  }\\n\\n  /* -------- Landing page ------- */\\n  .game-section {\\n    padding: 50px 30px 40px;\\n  }\\n  .game-section .item {\\n    margin: 0 12px 60px;\\n    width: 240px;\\n    height: 330px;\\n  }\\n  .game-section .item.active {\\n    width: 360px;\\n  }\\n  .game-section .item-desc {\\n    transform: translateY(calc(100% - 42px));\\n    -webkit-transform: translateY(calc(100% - 42px));\\n  }\\n}\\n\\n@media (max-width: 767px) {\\n  body {\\n    font-size: 14px;\\n  }\\n  h2 {\\n    margin-bottom: 20px;\\n  }\\n  h3 {\\n    margin: 0 0 8px;\\n    font-size: 19px;\\n    line-height: 24px;\\n  }\\n  .line-title {\\n    width: 250px;\\n  }\\n\\n  /* -------- Landing page ------- */\\n  .game-section {\\n    padding: 30px 15px 20px;\\n  }\\n  .game-section .item {\\n    margin: 0 10px 40px;\\n    width: 200px;\\n    height: 280px;\\n  }\\n  .game-section .item.active {\\n    width: 270px;\\n    box-shadow: 6px 10px 10px rgba(0, 0, 0, 0.25);\\n    -webkit-box-shadow: 6px 10px 10px rgba(0, 0, 0, 0.25);\\n  }\\n  .game-section .item-desc {\\n    padding: 0 14px 5px;\\n    transform: translateY(calc(100% - 42px));\\n    -webkit-transform: translateY(calc(100% - 42px));\\n  }\\n}\\n\",\"js\":\"$(\\\".custom-carousel\\\").owlCarousel({\\n  autoWidth: true,\\n  loop: true\\n});\\n$(document).ready(function () {\\n  $(\\\".custom-carousel .item\\\").click(function () {\\n    $(\\\".custom-carousel .item\\\").not($(this)).removeClass(\\\"active\\\");\\n    $(this).toggleClass(\\\"active\\\");\\n  });\\n});\\n\",\"html_pre_processor\":\"none\",\"css_pre_processor\":\"none\",\"js_pre_processor\":\"none\",\"html_classes\":\"\",\"css_starter\":\"neither\",\"js_library\":null,\"created_at\":\"2020-12-23T09:44:22.000Z\",\"updated_at\":\"2023-10-17T10:20:25.244Z\",\"title\":\"Expandable Animated Card Slider\",\"description\":\"We have made an expandable animated card slider, it will expand and collapse based on card click. We used owl carousel and jQuery for variable width and responsive slider. \\n\\nMade by Rajnee Makwana from Yudiz\",\"slug_hash\":\"wvzrPoj\",\"head\":\"\",\"private\":false,\"has_animation\":false,\"team_id\":0,\"css_prefix\":\"neither\",\"template\":false,\"parent_id\":0,\"comments_count\":11,\"custom_screenshot_filename\":null,\"loves_count\":5788,\"pick\":false,\"popularity\":45938,\"views_count\":168880,\"pick_visible_at\":null,\"cpid\":\"01768efc-34f0-7053-9233-c50667be532b\",\"is_new_editor_pen\":false,\"access\":\"Public\",\"pen_hash\":null}","__processorsMap":{"autoprefixer":"autoprefixer-10","babel":"babel-7","coffeescript":"coffeescript-2","format-1":"format-1","flutter":"flutter-1","haml":"haml-4","less":"less-3","lint-1":"lint-1","livescript":"livescript-1","markdown":"markdown-11","postcss":"postcss-7","pug":"pug-2","sass":"sass-1","scss":"sass-1","sass-ruby-3":"sass-ruby-3","sass-ruby-compass-3":"sass-ruby-compass-3","slim":"slim-3","stylus":"stylus-0","typescript":"typescript-4","vue":"vue-2","vue3":"vue-3"},"__favicon_mask_icon":"https://cpwebassets.codepen.io/assets/favicon/logo-pin-b4b4269c16397ad2f0f7a01bcdf513a1994f4c94b8af2f191c09eb0d601762b1.svg","__favicon_shortcut_icon":"https://cpwebassets.codepen.io/assets/favicon/favicon-aec34940fbc1a6e787974dcd360f2c6b63348d4b1f4e06c77743096d55480f33.ico","__path_to_iframe_console_runner":"https://cpwebassets.codepen.io/assets/editor/iframe/iframeConsoleRunner-6d8bf8b4b479137260842506acbb12717dace0823c023e08b96360e60b0840d9.js","__path_to_iframe_refresh_css":"https://cpwebassets.codepen.io/assets/editor/iframe/iframeRefreshCSS-44fe83e49b63affec96918c9af88c0d80b209a862cf87ac46bc933074b8c557d.js","__path_to_iframe_runtime_errors":"https://cpwebassets.codepen.io/assets/editor/iframe/iframeRuntimeErrors-4f205f2c14e769b448bcf477de2938c681660d5038bc464e3700256713ebe261.js","__path_to_processor_worker":"https://cpwebassets.codepen.io/assets/packs/router.js","__path_to_stop_execution_on_timeout":"https://cpwebassets.codepen.io/assets/common/stopExecutionOnTimeout-2c7831bb44f98c1391d6a4ffda0e1fd302503391ca806e7fcc7b9b87197aec26.js","__pen_normalize_css_url":"https://public.codepenassets.com/css/normalize-5.0.0.min.css","__pen_prefix_free_url":"https://public.codepenassets.com/js/prefixfree-1.0.7.min.js","__pen_reset_css_url":"https://public.codepenassets.com/css/reset-2.0.min.css"}