SaaikaHatak Comments - Answer Overflow

Well Im using Vue, and without declared width it was just skipping the transition as it wasnt going from 0 to 200px, it was going from undefined to 200px (correct me if im wrong)

26 replies

KPCKevin Powell - Community

•Created by SaaikaHatak on 8/29/2023 in #front-end

Grid card with image, text under and transform scale

Yeah, that would propably be the way to go, but first row isnt a specified value either. My friend told me not to do transition via width, and go with pure transform scale and by using timeouts with 1ms I managed to achieve propably best result. Im not yet sure if overview should be visible while scaling but thats not an issue. Here is what I was trying to have. It's slow because I wanted to see if image is jiggling on scaling

26 replies

KPCKevin Powell - Community

•Created by SaaikaHatak on 8/29/2023 in #front-end

Grid card with image, text under and transform scale

26 replies

KPCKevin Powell - Community

•Created by SaaikaHatak on 8/29/2023 in #front-end

Grid card with image, text under and transform scale

I tried to create a codepen, but I have to change a lot of things as I am using component based framework, anyway thanks for trying. I believe I achieved desired look

26 replies

KPCKevin Powell - Community

•Created by SaaikaHatak on 8/29/2023 in #front-end

Grid card with image, text under and transform scale

Thats something I want to achieve, the thing is I dont know how long/wide description will be (Dont want to have a fixed height). I think I got to the point I could say Im happy. Basically I have a Movie List which is just a set of images When I hover that image it shows me a new element which is Movie Card that gets all data about hovered element (title, rating,description, DOM position) The very same Movie Card is being created with almost no width, with transition that movie card is becoming wider(bigger) to that Movie List width hovered element and after that it becomes 1.55 bigger (transform scale). Also when unhovered its the same, but in reverese; Movie Card with grid-template-rows: min-content 1fr; is working perfectly. The thing is when for first row I set 1fr I have empty space as my image has 16/9 aspect ratio so it basically needs to be fit/min/max-content Second row works great but when my transition is starting its for example 50px wide, making my second row to have a lot of height as text tries to fit that element If You still cant understand me just forget about it. I will try on my own or leave it like that

26 replies

KPCKevin Powell - Community

•Created by SaaikaHatak on 8/29/2023 in #front-end

Grid card with image, text under and transform scale

All I need is to make sure that div will have a height of the content before showing it to the user (it may overflow or anything) but it wont go higher than desired width

26 replies

KPCKevin Powell - Community

•Created by SaaikaHatak on 8/29/2023 in #front-end

Grid card with image, text under and transform scale

Animation is basically scaling up if hovered, and scaling down if unhover where it then dissapear

26 replies

KPCKevin Powell - Community

•Created by SaaikaHatak on 8/29/2023 in #front-end

Grid card with image, text under and transform scale

26 replies

KPCKevin Powell - Community

•Created by SaaikaHatak on 8/29/2023 in #front-end

Grid card with image, text under and transform scale

<div class="hovered">
    <img
      :src="props.slide.image"
      :alt="props.slide.title || props.slide.name"
      width="250"
      height="120"
    />
    <div class="info" :class="props.text ? 'hidden' : ''">
      <h3 v-if="renderText">
        <span class="name">Title:</span>
        {{ props.slide.title || props.slide.name }}
      </h3>
      <p v-if="renderText">
        <span class="name">Release date:</span> {{ releaseDate }}
      </p>
      <p v-if="renderText">
        <span class="name">Rating</span> {{ props.slide.vote_average }}
        <span class="name">Votes:</span> {{ props.slide.vote_count }}
      </p>
      <p v-if="renderText" class="overview">
        <span class="name">Overview: </span> {{ props.slide.overview }}
      </p>
    </div>
  </div>

<div class="hovered">
    <img
      :src="props.slide.image"
      :alt="props.slide.title || props.slide.name"
      width="250"
      height="120"
    />
    <div class="info" :class="props.text ? 'hidden' : ''">
      <h3 v-if="renderText">
        <span class="name">Title:</span>
        {{ props.slide.title || props.slide.name }}
      </h3>
      <p v-if="renderText">
        <span class="name">Release date:</span> {{ releaseDate }}
      </p>
      <p v-if="renderText">
        <span class="name">Rating</span> {{ props.slide.vote_average }}
        <span class="name">Votes:</span> {{ props.slide.vote_count }}
      </p>
      <p v-if="renderText" class="overview">
        <span class="name">Overview: </span> {{ props.slide.overview }}
      </p>
    </div>
  </div>

my HTML (I dont need that v-if which shows h3 and paragraph only if animation is done if there is better solution) and here are my styles for now

.hovered {
  --scale-size: 1.85;
}
.info {
  display: flex;
  flex-direction: column;
  padding: 0.5rem 0.25rem;
  background-color: #181818;
  border-radius: 0 0 7px 7px;
  margin: -1px 0;
  height: 100%;
}

.hidden {
  height: max-content;
}

h3 {
  font-size: calc(clamp(0.4rem, 1.5dvw, 0.7rem) / 1.1);
  font-weight: 300;
  line-height: 1.1rem;
  // transform:  scale( calc(1 / var(--scale-size)));
}
p {
  font-size: calc(clamp(0.4rem, 1.5dvw, 0.7rem) / 1.1);
  font-weight: 300;
  padding: 0.1rem 0;
}
.overview {
  font-size: calc(clamp(0.2rem, 1.5dvw, 0.6rem) / 1.1);
}
.name {
  font-weight: 700;
}
.hovered {
  line-height: normal;
  box-shadow: rgb(0 0 0 / 75%) 0px 3px 10px;
  position: absolute;
  transform: translate(-50%, -50%) scale(var(--scale-size));
  display: grid;
  font-weight: 400;

  grid-template-rows: max-content minmax(100%, 1fr);

  gap: 0;

  padding: 0;
  z-index: 25;
}

img {
  object-fit: fill;
  width: 100%;
  height: auto;
  border-radius: 7px 7px 0 0;
}

.hovered {
  --scale-size: 1.85;
}
.info {
  display: flex;
  flex-direction: column;
  padding: 0.5rem 0.25rem;
  background-color: #181818;
  border-radius: 0 0 7px 7px;
  margin: -1px 0;
  height: 100%;
}

.hidden {
  height: max-content;
}

h3 {
  font-size: calc(clamp(0.4rem, 1.5dvw, 0.7rem) / 1.1);
  font-weight: 300;
  line-height: 1.1rem;
  // transform:  scale( calc(1 / var(--scale-size)));
}
p {
  font-size: calc(clamp(0.4rem, 1.5dvw, 0.7rem) / 1.1);
  font-weight: 300;
  padding: 0.1rem 0;
}
.overview {
  font-size: calc(clamp(0.2rem, 1.5dvw, 0.6rem) / 1.1);
}
.name {
  font-weight: 700;
}
.hovered {
  line-height: normal;
  box-shadow: rgb(0 0 0 / 75%) 0px 3px 10px;
  position: absolute;
  transform: translate(-50%, -50%) scale(var(--scale-size));
  display: grid;
  font-weight: 400;

  grid-template-rows: max-content minmax(100%, 1fr);

  gap: 0;

  padding: 0;
  z-index: 25;
}

img {
  object-fit: fill;
  width: 100%;
  height: auto;
  border-radius: 7px 7px 0 0;
}