Kevin Powell - Community•3mo ago

Increase additional height of a dynamic element

I wanted to increase the height ( ON HOVER to show the description ) of the div element which has a dynamic height of the inner element (i.e. an image), if someone can help me with this query it would be really helpful 🙏 Basic HTML:

<article class="gallery">
          <div class="img-cont">
            <img src="https://plus.unsplash.com/premium_photo-1675378165346-5f6c3959f0d2?w=600&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MXx8cGFpbnRpbmd8ZW58MHx8MHx8fDA%3D" alt="">
            <div class="img-content">
              <h3 class="img-title">Lorem ipsum dolor sit, amet consectetur adipisicing elit.</h3>
              <span class="img-tag">Lorem, ipsum.</span>
            </div>
          </div>
          <div class="img-cont">
          ...
          ...

<article class="gallery">
          <div class="img-cont">
            <img src="https://plus.unsplash.com/premium_photo-1675378165346-5f6c3959f0d2?w=600&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MXx8cGFpbnRpbmd8ZW58MHx8MHx8fDA%3D" alt="">
            <div class="img-content">
              <h3 class="img-title">Lorem ipsum dolor sit, amet consectetur adipisicing elit.</h3>
              <span class="img-tag">Lorem, ipsum.</span>
            </div>
          </div>
          <div class="img-cont">
          ...
          ...

Basic CSS (just added the hover-effect on the image and not any other effects):

.gallery {
  max-width: var(--max-width);
  columns: 3;
  column-gap: 15px;
}
.img-cont {
  width: 100%;
  /* background: lightgray; */
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 10px;
  margin-bottom: 10px;
  box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.2);
  break-inside: avoid;
  overflow: hidden;
  transition: all 0.5s ease-in-out;
}

.img-cont:hover img {
  transform: scale(0.9) rotate(-2deg);
}

.img-cont img {
  width: 100%;
  transition: all 0.5s ease-in-out;
}

.img-content {
  display: flex;
  display: none;
  /* opacity: 0; */
  flex-direction: column;
  justify-content: center;
  gap: 10px;
  z-index: 10;
  transition: all 0.5s ease-in-out;
  /* text-wrap: balance; */
}

.gallery {
  max-width: var(--max-width);
  columns: 3;
  column-gap: 15px;
}
.img-cont {
  width: 100%;
  /* background: lightgray; */
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 10px;
  margin-bottom: 10px;
  box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.2);
  break-inside: avoid;
  overflow: hidden;
  transition: all 0.5s ease-in-out;
}

.img-cont:hover img {
  transform: scale(0.9) rotate(-2deg);
}

.img-cont img {
  width: 100%;
  transition: all 0.5s ease-in-out;
}

.img-content {
  display: flex;
  display: none;
  /* opacity: 0; */
  flex-direction: column;
  justify-content: center;
  gap: 10px;
  z-index: 10;
  transition: all 0.5s ease-in-out;
  /* text-wrap: balance; */
}

9 Replies

13eck•3mo ago

Be sure to use code blocks to avoid the formatting issues you’re having. See #How To Ask Good Questions for the syntax

Chris Bolson•3mo ago

One idea would be to use grid-template-rows animation/transition. You could wrap the description block in it's a wrapper and set it to have grid-template-rows: 0fr; Then, on hover, this would then be changed to grid-template-rows: 1fr; A quick demo:
https://codepen.io/cbolson/pen/dyBmPXq Note - This method would require extra markup and I suspect that it wouldn't play nicely with your use of columns

justAni•3mo ago

thanks for the reply, but i specifically want the height of the img-cont increased, cause I want it to play the transition of sliding the img description down from the image (or more like extending the container to show the description)

Chris Bolson•3mo ago

... i specifically want the height of the img-cont increased, cause I want it to play the transition of sliding the img description down from the image

You didn't mention that in your original post. I have updated my codepen to slide the description down from the image with a simple translate. ~~However it still doesn't update the height of the img-cont.~~

justAni•3mo ago

ooh sorry, and does the img-cont extend its height ? 😬

Chris Bolson•3mo ago

~~no, (I added that comment to my previous message afterwards, sorry).~~ sorry.... yes it does I was thinking of the image itself. I got myself in a muddle

justAni•3mo ago

ooh not the image itself just the white container, cause I just don't get how to increase its height as it is dynamically set because of the image's height

Chris Bolson•3mo ago

As I mentioned earlier, my concern with doing this would be the fact that you are using columns . As the images are hovered and extend in height I suspect that this will mess with the layout, moving things from one column to another as the browser attempts to balance things out between them.

justAni•3mo ago

don't worry bout it, the columns can do whatever they want (i.e. snapping elements to other columns) I just want the img-cont to smoothly increase it's height and display the description

Gaming

Programming

Increase additional height of a dynamic element