CODEWITHSUNDEEP
csscss-transitions
Darren G
Darren G

Reputation: 878

Triggering CSS transition when setting top to auto

I am building a personal portfolio site to showcase some projects and am trying to implement the following:

Everything is set up, but I cannot get the card to transition smoothly from the bottom of the image, it currently jumps from its starting position to ending position.

A codepen is here: https://codepen.io/umbauk/full/vYYZEjW

The relevant portion of my code is here:

.project-text {
  background-color: rgb(58, 58, 58);
  padding: 1%;
  z-index: 5;
  position: absolute;
  width: 100%;
  top: calc(100% - 3rem);
  left: 0;
  transition: all 0.5s ease;
}

.project-box:hover .project-text {
  top: auto;
  bottom: 0;
  transition: all 0.5s ease;
}

project-text box is of variable size so I initially set it to show the top 3rem of the text box so that only the title displays. On hover, I set bottom: 0 so that all text is displayed (and set top: auto so that setting bottom can override top.

However, transition: all 0.5s ease; is not being triggered. It is triggered if I set top to something other than auto e.g. top: 50%.

How do I get my project-text box to smoothly transition in and out while just popping up enough to show all text? Thanks in advance!

Upvotes: 0

Views: 88

Answers (1)

Paulie_D
Paulie_D

Reputation: 115299

Basically you cannot transition anything to auto. Transitions etc rely on numbers and auto is not a number.

Rather than using changing top values etc I'd suggest you look into a transform.

html {
  font-size: 18px;
  height: 100%;
}

body {
  color: rgb(177, 177, 177);
  height: 100%;
  background-color: #121212;
}

h3 {
  font-size: 2rem;
  color: #ffffff;
  text-decoration: none;
  opacity: 0.87;
  margin: 0;
}

.projects {
  height: 100%;
  background-color: #121212;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 300px 300px;
  grid-template-areas: 'project1 project2' 'project3 project4';
  padding-left: 15%;
  padding-right: 15%;
  padding-top: 5%;
  grid-gap: 5%;
}

.project-text {
  background-color: rgb(58, 58, 58);
  padding: 1%;
  z-index: 5;
  position: absolute;
  width: 100%;
  top: 100%;
  left: 0;
  transform: translateY(-3rem);
  transition: all 0.5s ease;
}

.project-box:hover .project-text {
  transform: translateY(-100%);
  transition: all 0.5s ease;
}

.project-box {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  flex: 1 1 auto;
  justify-content: center;
  align-items: flex-end;
  background-position: center;
  background-size: cover;
  position: relative;
  background: #121212;
  overflow: hidden;
}

.project-box:before {
  content: ' ';
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  background-repeat: no-repeat;
  background-position: 50% 0;
  background-size: cover;
}

.project-box:hover::before {
  opacity: 0.6;
}

.project1 {
  grid-area: project1;
}

.project1:before {
  background-image: url('https://darrengreenfield.com/cafeandkids.png');
}
<body>
  <div class="projects" id="projects">
    <div class="project1 project-box">
      <div class="project-text">
        <a href="https://cafeandkids.com" target="_blank" rel="noopener noreferrer">
          <h3>cafeandkids.com</h3>
        </a>
        <p>
          An app to help parents find great playgrounds near great coffee shops. A single page, front-end only app using HTMl, CSS, JavaScript and React. Uses Google Maps API and the OpenWeather API.
        </p>
      </div>
    </div>
  </div>
</body>

Upvotes: 1

Related Questions