Kevin Powell - Community•16mo ago

Grid card with image, text under and transform scale

Hello, I am trying to create a div that will have an image, and under it there is a div with data about that image, the problem is that my grid-template-rows needs to have a max-content/min-content so that 1st row wont get bigger than image, my second row should show text only after my animation is finished (and I would like it to have an actual size of the content (with text it just getting higher as text tries to fit div) That card on unhover should scale down to something like 50px I want to have a second screen (achieved with visibility:hidden) and when animation is done to have 1st screen (text visible) but when its scaling down text still gets my div to make whole element bigger I can provide code as well if needed

19 Replies

SaaikaHatakOP•16mo ago

<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;
}

Myndi•16mo ago

I'm still a bit confused on what you're trying to achieve

SaaikaHatakOP•16mo ago

Simply a grid where I have an img and div, I want that div to take height of content without showing it to the user before animation of scaling ends and so that content (text) wont make it look like this

Jochem•16mo ago

it's often a lot easier to reason and talk about especially animations when you provide a live example somewhere like codepen cause I think what you're saying is that your animation is doing a thing, and you don't want it to do that thing, but I'm still having trouble visualizing what that is without being able to poke at the code in the inspector and seeing the incorrect animation playing on my own screen

Myndi•16mo ago

I second to this

SaaikaHatakOP•16mo ago

Animation is basically scaling up if hovered, and scaling down if unhover where it then dissapear 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

Myndi•16mo ago

Could you please share a CodePen demo or Sandbox?

snxxwyy•16mo ago

@saaika i just whipped this up, is this what you're looking to do? https://codepen.io/deerCabin/pen/XWodMBm

CodePen

image-card-scale-example

...

snxxwyy•16mo ago

@myntsu @Jochem i believe from their explanation it's something like this they're looking for if that helps any understanding perhaps? ^ (sorry for the pings, hope that's all good)

Myndi•16mo ago

It's up to them I guess, to tell us

snxxwyy•16mo ago

for sure, i was just adding all of what they said in there just in case there was something that was correct, i put it as reference for ya'll too as if it happens to be something different, the ideas are all there . Trying to be useful that's all.

SaaikaHatakOP•16mo ago

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

Jochem•16mo ago

again, like Myndi and I have both said, it's easier to help if you have the broken code available in a format we can play with. I can't reason about code I have to read and not run, and if I just copy/paste what you've sent, I can't be sure we're seeing the same thing. If you're completely unwilling to make a codepen, which would probably take a quarter of the time that all these explanations have taken, then alright, I'll leave it at that.

SaaikaHatakOP•16mo ago

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

SaaikaHatakOP•16mo ago

snxxwyy•16mo ago

I believe I understand what you’re trying to do now. so what’s shown in my codepen is what you want to achieve but you don’t want your movie info section to have a fixed height, you want it to be the height of the content itself no matter how much text there is as since you don’t know how much text there will be you won’t have to be guessing heights? If it is that, if you look in my codepen where I’m defining the grid rows, all you need to do is change grid-template-rows: repeat(2, 250px); to grid-template-rows: 250px auto;. Auto will set the row height to the height of the content.

SaaikaHatakOP•16mo ago

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

snxxwyy•16mo ago

This doesn’t do the animation via width, it includes your transform scale and just makes the desired content appear on hover

SaaikaHatakOP•16mo ago

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) my first animations on that were done via <Transition /> that Vue provides with Timeout it was setting width and then after a 1ms it was changing it instead of going straight to desired width (as JS is one-thread language) Still thanks for help ^_^

Gaming

Programming

Grid card with image, text under and transform scale