Make childrens not being affected by the main <div> tag ??

[sand parcel]

How do i animate the container in order to make it reach the left & side of the screen without stretching the informations ?

import React from "react";
import classNames from "classnames";
import { Icon } from "figicons";

interface IProps {
    mode: "light" | "dark";
    project: "wongo" | "album" | "click" | "unity";
    title: string;
    description: string;
    image?: string;
    url?: string;
    isPrivate?: boolean;
    product?: boolean;
}

export default function Project({
    mode,
    title,
    description,
    project,
    image,
    url,
    isPrivate,
    product = false,
}: IProps) {
    const classes = classNames("project r2", mode, {
        [`${project}100@bg`]: project,
    });

    return (
        <div className={classes}>
            <div className="info">
                <h4>{title}</h4>
                <p className="mt5">{description}</p>
                {isPrivate && (
                    <button className={classNames("button mt8 disabled", mode)}>
                        <span>Private {product ? "Product" : "Project"}</span>
                    </button>
                )}
                {url && !isPrivate && (
                    <a
                        href={url}
                        target="_blank"
                        rel="noopener noreferrer"
                        className={classNames(
                            "button mt8",
                            mode,
                            `${project}100@text`
                        )}
                    >
                        <span className="mr3">
                            Explore {product ? "Product" : "Project"}
                        </span>{" "}
                        <Icon name="arrow-right" strokeWidth={3} />
                    </a>
                )}
            </div>

            {image && (
                <div
                    className="image"
                    style={{ backgroundImage: `url(${image})` }}
                ></div>
            )}
        </div>
    );
}

and this is the scss

.project {
  position: relative;
  display: flex;
  justify-content: space-between;
  padding: 80px;
  overflow: hidden;
  transform: scale(1);
  transition: 180ms ease transform;

  > .info {
    max-width: 380px;
    pointer-events: auto;
  }

  > .image {
    position: absolute;
    top: 0;
    right: 0;
    height: 124%;
    width: 56%;
    background-size: cover;
    background-position: left -48px;
    background-repeat: no-repeat;
    transition: 180ms ease height;
    user-select: none;
    pointer-events: none;
    transform-origin: bottom right;
  }

  &.dark > .info {
    h4 {
      @extend .black100\@text;
    }

    p {
      color: rgba(0, 0, 0, 0.88);
    }
  }

  &.light > .info {
    h4 {
      @extend .white100\@text;
    }

    p {
      color: rgba(255, 255, 255, 0.88);
    }
  }

  &:hover {
    transform: scale(1.02);

    > .image {
      height: 128%;
    }
  }

  + .project {
    margin-top: 32px;
  }

  @include below('md') {
    flex-direction: column;
    margin-left: -32px;
    padding: 48px 32px;
    width: calc(100% + 64px);
    border-radius: 0;
    transform: scale(1) !important;

    &::after {
      border-radius: 0;
    }

    .image {
      display: none;
    }

    + .project {
      margin-top: 0;
    }
  }
}

id like the compenent going like so but the info are too stretched, i tried with this alternative, but the info are getting messy

Makes children not being affected by the main <div> tag ??

Make childrens not being affected by the main <div> tag ??

[barren roost]

@sand parcel Since this seems to mostly be an HTML/CSS question, it'd probably help if you made a HTML/CSS demo (e.g. codesandbox, jsfiddle) that showed the issue.

[sand parcel]

i never used those 😦

[barren roost]

They're just sites where you can make examples using HTML/CSS/JS code.

[sand parcel]

so you want me to rewrite the thing in html instead of ts ?

[barren roost]

@sand parcel More or less: you should be able to basically copy the HTML output and CSS that's producing that result.

Or make a simple example from scratch using similar CSS that produces the same result.

[sand parcel]

i'd like to make this animation for my container but the info that are supposed to be in (and the images) are not supposed to getting stretched