KPC
Kevin Powell - Community•6mo ago
justAni

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; */
}
No description
9 Replies
13eck
13eck•6mo 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
Chris Bolson•6mo 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
justAniOP•6mo 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
Chris Bolson•6mo 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
justAniOP•6mo ago
ooh sorry, and does the img-cont extend its height ? 😬
Chris Bolson
Chris Bolson•6mo 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
justAniOP•6mo 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
Chris Bolson•6mo 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
justAniOP•6mo 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

Did you find this page helpful?