JSFiddle - React, Tailwind, and code Playground

by HDL52

HTML

<section class="container">
  <div class="category_container">
    <div class="content">
      <img
        src="https://raw.githubusercontent.com/Hongda-OSU/PicGo-2.3.1/master/imgied0v0dgsgyqeoh7804b0ca54buj0qd.jpg"
        class="professio_image"
        alt="Profession"
      />
      <img
        src="https://raw.githubusercontent.com/Hongda-OSU/PicGo-2.3.1/master/imgied0v0dgsgyqeoh7804b0ca54buj0qd.jpg"
        class="profile_image"
        alt="Profile"
      />
      <div class="profile_detail">
        <span>John Doe</span>
        <p>UI/UX Designer + Graphic Designer</p>
      </div>

      <div class="wrapper">
        <div class="profile_quote">
          <p>
            "UI is the saddle, the stirrups, & the reins. UX is the feeling you
            get being able to ride the horse."
          </p>
        </div>
      </div>
    </div>
    <div class="content">
      <img
        src="https://raw.githubusercontent.com/Hongda-OSU/PicGo-2.3.1/master/imge39twvhffwemdsipqncbwko5vayrxgd.jpg"
        class="profession_image"
        alt="Profession"
      />
      <img
        src="https://raw.githubusercontent.com/Hongda-OSU/PicGo-2.3.1/master/imge39twvhffwemdsipqncbwko5vayrxgd.jpg"
        class="profile_image"
        alt="Profile"
      />
      <div class="profile_detail">
        <span>Prince Akashi</span>
        <p>Photographer + Model</p>
      </div>
      
      <div class="wrapper">
        <div class="profile_quote">
          <p>
            "If you see something that moves you, and then snap it, you keep a
            moment."
          </p>
        </div>
      </div>
    </div>
    <div class="content">
      <img
        src="https://raw.githubusercontent.com/Hongda-OSU/PicGo-2.3.1/master/imgodr8vukcwco0h34p0ngc84462vs454j.jpg"
        class="profession_image"
        alt="Profession"
      />
      <img
        src="https://raw.githubusercontent.com/Hongda-OSU/PicGo-2.3.1/master/imgodr8vukcwco0h34p0ngc84462vs454j.jpg"
       ...

SCSS

@import url("https://fonts.googleapis.com/css2?family=Inter:[email protected]&display=swap");

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

body {
  font-family: "Inter", sans-serif;
}

:root {
  --light: #ffe6e6;
  --dark: #0c0c0c;
}

.container {
  --bg-color: radial-gradient(
    circle at 50% 0%,
    rgba(50, 50, 50, 1) 0%,
    rgba(12, 12, 12, 1) 100%
  );

  overflow: clip;
  position: relative;

  display: flex;
  justify-content: center;
  align-items: center;

  padding: 2rem 5rem;

  width: 100%;
  height: 100dvh;
  background-image: var(--bg-color);
}

.category_container {
  --gap: 0.5rem;

  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: nowrap;
  gap: calc(var(--gap) * 2);

  width: 100%;
  height: 100%;
}

.content {
  --active: 0;

  cursor: pointer;
  overflow: clip;

  position: relative;
  z-index: 10;

  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 1.5rem;

  padding: 2.5rem;

  width: calc((100% / 3) - var(--gap));
  height: 100%;

  border-radius: 1rem;

  transition: width 0.5s ease-in-out;
}
.content:hover {
  --active: 1;

  width: calc(70% - var(--gap));
}
.content::before {
  content: "";

  position: absolute;
  z-index: -10;
  top: 0;
  left: 0;

  width: 100%;
  height: 100%;
  background-color: var(--dark);

  opacity: 0.6;
}

.content img {
  position: absolute;
  z-index: -20;
  top: 0;
  left: 0;

  width: 100%;
  height: 100%;

  object-fit: cover;
  object-position: center;
}

.content .profile_image {
  opacity: calc(1 - var(--active));

  transition: opacity 0.3s ease-in-out;
}

.profile_detail {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;

  width: 12rem;
  transition: transform 0.5s cubic-bezier(0.23, 0.93, 0.77, 1) 0.01s;
}

.profile_detail span {
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--light);
  text-wrap: nowrap;
}

.profile_detail p {
  font-size: 0.75rem;
  font-weight: 500;
  color:...

JavaScript

// https://codepen.io/jakob-e/pen/vYMEapr