CodePen Embed - Advertising Page Panel

<!DOCTYPE html>
<html lang="en" class="theme_switchable">
<head>
  <meta charset="UTF-8">
  <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.0/normalize.min.css'>
<link rel='stylesheet' href='https://static.fontawesome.com/css/fontawesome-app.css'>
<link rel='stylesheet' href='https://pro.fontawesome.com/releases/v5.2.0/css/all.css'>
<link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Roboto:400,700'><link rel="stylesheet" href="./style.css">

</head>
<body>
<!-- partial:index.partial.html -->
<div class="options">
   <div class="option active" style="--optionBackground:url(https://static01.nyt.com/images/2020/12/14/well/14google-photo/14google-photo-videoSixteenByNineJumbo1600.jpg);">
      <div class="shadow"></div>
      <div class="label">
         <div class="icon">
            <i class="fas fa-store"></i>
         </div>
         <div class="info">
            <div class="main">Google Adwards</div>
            <div class="sub">Search Engine Advertising</div>
         </div>
      </div>
   </div>
   <div class="option" style="--optionBackground:url(https://images.fastcompany.net/image/upload/w_1280,f_auto,q_auto,fl_lossy/wp-cms/uploads/2022/06/p-1-90759195-why-meta-is-flooding-the-airwaves-with-ads-foradvertising.jpg);">
      <div class="shadow"></div>
      <div class="label">
         <div class="icon">
            <i class="fas fa-mobile"></i>
         </div>
         <div class="info">
            <div class="main">Social Media Advertising (Meta)</div>
            <div class="sub">Run paid ads and reach your taget audience</div>
         </div>
      </div>
   </div>
   <div class="option" style="--optionBackground:url(https://images.unsplash.com/photo-1477959858617-67f85cf4f1df?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxleHBsb3JlLWZlZWR8MXx8fGVufDB8fHx8fA%3D%3D&w=1000&q=80);">
      <div class="shadow"></div>
      <div class="label">
         <div class="icon">
            <i class="fas fa-globe"></i>
         </div>
         <div class="info">
            <div class="main">Search Engine Optimization</div>
            <div class="sub">Website Structure/Keyword Searching</div>
         </div>
      </div>
   </div>
   <div class="option" style="--optionBackground:url(https://media.timeout.com/images/105796970/750/422/image.jpg);">
      <div class="shadow"></div>
      <div class="label">
         <div class="icon">
            <i class="fas fa-user"></i>
         </div>
         <div class="info">
            <div class="main">Re-Marketing Campaigns</div>
            <div class="sub">Reach the audience that have already expressed interested</div>
         </div>
      </div>
   </div>
   <div class="option" style="--optionBackground:url(https://rocketexpansion.com/wp-content/uploads/2021/04/digital-marketing-tips-v2-b.jpg);">
      <div class="shadow"></div>
      <div class="label">
         <div class="icon">
            <i class="fas fa-tv"></i>
         </div>
         <div class="info">
            <div class="main">Digital Paid Advertisements</div>
            <div class="sub">Showcase your brand on billboards and media</div>
         </div>
      </div>
   </div>
</div>
<!-- partial -->
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>
</body>
</html>

@import url(https://pro.fontawesome.com/releases/v5.11.2/css/all.css);

body {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  height: 100vh;
  font-family: "Roboto", sans-serif;
  background: #000000; /* Set background color to black */
  color: white; /* Set text color to white for better visibility */
  transition: 0.25s;
  
}
body.dark {
  background: #000000;
  color: black;
}
@media (prefers-color-scheme: dark) {
  body:not(.light) {
    background: #000000;
    color: white;
  }
}

body .options {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  overflow: hidden;
  min-width: 600px;
  max-width: 900px;
  width: calc(100% - 100px);
  height: 400px;
}
@media screen and (max-width: 718px) {
  body .options {
    min-width: 520px;
  }
  body .options .option:nth-child(5) {
    display: none;
  }
}
@media screen and (max-width: 638px) {
  body .options {
    min-width: 440px;
  }
  body .options .option:nth-child(4) {
    display: none;
  }
}
@media screen and (max-width: 558px) {
  body .options {
    min-width: 360px;
  }
  body .options .option:nth-child(3) {
    display: none;
  }
}
@media screen and (max-width: 478px) {
  body .options {
    min-width: 280px;
  }
  body .options .option:nth-child(2) {
    display: none;
  }
}
body .options .option {
  position: relative;
  overflow: hidden;
  min-width: 60px;
  margin: 10px;
  background: var(--optionBackground, var(--defaultBackground, #E6E9ED));
  background-size: auto 120%;
  background-position: center;
  cursor: pointer;
  transition: 0.5s cubic-bezier(0.05, 0.61, 0.41, 0.95);
}
body .options .option:nth-child(1) {
  --defaultBackground:#ED5565;
}
body .options .option:nth-child(2) {
  --defaultBackground:#FC6E51;
}
body .options .option:nth-child(3) {
  --defaultBackground:#FFCE54;
}
body .options .option:nth-child(4) {
  --defaultBackground:#2ECC71;
}
body .options .option:nth-child(5) {
  --defaultBackground:#5D9CEC;
}
body .options .option:nth-child(6) {
  --defaultBackground:#AC92EC;
}
body .options .option.active {
  flex-grow: 10000;
  transform: scale(1);
  max-width: 600px;
  margin: 0px;
  border-radius: 40px;
  background-size: auto 100%;
  /*&:active {
     transform:scale(0.9);
  }*/
}
body .options .option.active .shadow {
  box-shadow: inset 0 -120px 120px -120px black, inset 0 -120px 120px -100px black;
}
body .options .option.active .label {
  bottom: 20px;
  left: 20px;
}
body .options .option.active .label .info > div {
  left: 0px;
  opacity: 1;
}
body .options .option:not(.active) {
  flex-grow: 1;
  border-radius: 30px;
}
body .options .option:not(.active) .shadow {
  bottom: -40px;
  box-shadow: inset 0 -120px 0px -120px black, inset 0 -120px 0px -100px black;
}
body .options .option:not(.active) .label {
  bottom: 10px;
  left: 10px;
}
body .options .option:not(.active) .label .info > div {
  left: 20px;
  opacity: 0;
}
body .options .option .shadow {
  position: absolute;
  bottom: 0px;
  left: 0px;
  right: 0px;
  height: 120px;
  transition: 0.5s cubic-bezier(0.05, 0.61, 0.41, 0.95);
}
body .options .option .label {
  display: flex;
  position: absolute;
  right: 0px;
  height: 40px;
  transition: 0.5s cubic-bezier(0.05, 0.61, 0.41, 0.95);
}
body .options .option .label .icon {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  min-width: 40px;
  max-width: 40px;
  height: 40px;
  border-radius: 100%;
  background-color: white;
  color: var(--defaultBackground);
}
body .options .option .label .info {
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-left: 10px;
  color: white;
  white-space: pre;
}
body .options .option .label .info > div {
  position: relative;
  transition: 0.5s cubic-bezier(0.05, 0.61, 0.41, 0.95), opacity 0.5s ease-out;
}
body .options .option .label .info .main {
  font-weight: bold;
  font-size: 1.2rem;
}
body .options .option .label .info .sub {
  transition-delay: 0.1s;
}

 $(".option").click(function(){
 $(".option").removeClass("active");
 $(this).addClass("active");
   
});

This Pen is owned by maedbusiness on CodePen.

See more by @maedbusiness on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js