Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Hidden/visible box transition on button click

@jvmdo

Desktop design screenshot for the Article preview component coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


I've applied max-height: 0 and visibility: hidden then max-height: 10rem and visibility: visible. This way the box is displayed from top to bottom on transition.

How could I make it to display it from bottom to top using this same hidden/visible technique?

Community feedback

cheg 380

@chegx

Posted

Hi JOÃO. You can change the top property to bottom:

.card-share {
  align-items: center;
  background-color: hsl(217, 19%, 35%);
  border-bottom-left-radius: 0.75rem;
  border-bottom-right-radius: 0.75rem;
  display: flex;
  gap: clamp(1rem, -1.737rem + 11.68vw, 2rem);
  height: 4rem;
  max-height: 0;
  /* overflow: hidden; */
  visibility: hidden;
  padding-inline: 2rem;
  position: absolute;
  bottom: 0;
  transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  width: 100%;
}

The same for Desktop Layout. Remove top property and calculate position from the bottom.

Marked as helpful

0

@jvmdo

Posted

@chegx whooa thank you. That's quite obvious even tho I couldn't figure it out at the time I was coding 😅

0

Please log in to post a comment

Log in with GitHub
Discord logo

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord